Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 4, 2020 at 11:16 am #1181218
    sftsengineering

    Dear Kriesi Team,

    really like Enfold to create websites!

    I do have some issues with the Menu and the distance between the main menu and the opening submenu.
    Also, the burger menu opens, but there is a lot of white space on top for some reason.

    Here is the actual page:

    Home

    Here the page with the distance of the submenu to menu that i would like to achieve:

    Homepage

    Also on https://development.sfts-engineering.com the burger menu has a lot of white space that i cannot explain.

    How can i reduce the space of the submenuline?
    How do i fix the burger white space?

    Thank you in advance
    Matt

    February 4, 2020 at 5:35 pm #1181387
    Victoria

    Hey sftsengineering,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.html_av-overlay-side #top #wrap_all .av-burger-overlay li a {
    line-height: 2.3em; 
    font-size: 18px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    February 5, 2020 at 9:43 am #1181662
    sftsengineering

    Thank you Victoria,

    i applied above code in the Quick CSS.The burger menu is fixed now :)
    In general: Does the burger menu come with that much white space by default or did i mess up something?

    Also would you have a code to decrease the menu/submenu distance?

    Thank you!
    Matt

    • This reply was modified 4 years, 10 months ago by sftsengineering. Reason: deactivated and reactivated the menu. change only took effect after that
    February 7, 2020 at 9:18 am #1182247
    Rikard

    Hi Matt,

    Please try this CSS as well:

    .av-main-nav ul {
    top: 100px;
    z-index: 99;
}

    Best regards,
    Rikard

    February 7, 2020 at 3:34 pm #1182322
    sftsengineering

    Thanks Rikard, that works!

    February 7, 2020 at 3:47 pm #1182330
    sftsengineering

    On a related topic but for mobile:

    I used below code to make the burger menu sticky:
    /* Sticky burger on mobile */
    @media only screen and (max-width: 990px) {
    .responsive #top .av-main-nav .av-burger-menu-main {
    position: fixed;
    top: 0px;
    }}

    now, the Burger is overlaying the “Search Icon” (Magnifying Glass).

    Is there a CSS available to move the search icon slightly to the left?

    Thank you!
    Matt

    February 8, 2020 at 9:30 am #1182527
    Rikard

    Hi Matt,

    I can’t see that happening on your live or development site, did you manage to get it working already?

    Best regards,
    Rikard

    February 8, 2020 at 10:33 am #1182558
    sftsengineering

    Hi Rikard,

    Indeed I solved it in another way ;)

    I moved the Burger to the left.

    position: fixed;
    Left: 0px;

    Could I also use something like this?:

    position: fixed;
    Bottom: 0px;
    Left: 50%

    The goal is to move the menu to the bottom in the Center.

    All the best!
    Matt

    February 9, 2020 at 5:15 am #1182690
    Rikard

    Hi Matt,

    Great, I’m glad that you found a solution. If your CSS to move it to the bottom is working then I don’t see any problem with that :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.