Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • March 10, 2020 at 6:38 pm #1191970
    beenee

    Hi guys,
    the menu on our customer site is breaking below a viewport fo 1300px. To avoid this and show a burgermenu, I tried to use this code:

    @media only screen and (max-width: 1300px) {.av-main-nav > li.menu-item-avia-special {
    display: block;
}
.av-main-nav > li {
    display: none;
}}

@media only screen and (min-width: 990px) {
span.menu-break {
display: block;
line-height: 0;
bottom: 30px;
position: relative;
}
.menu-item-top-level{
text-align: center;
}}

    …but this is messing up the design with a jumping menu! (Just try yourself use viewport below 1300px and mouseover burger-menu…)
    Do you have any ideas? All similar support requests didn’t work…

    Best
    Stefan

    March 11, 2020 at 6:03 am #1192145
    Rikard

    Hey Stefan,

    Please try this CSS instead to see if you have any luck with it:

    @media only screen and (max-width: 1300px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

    Best regards,
    Rikard

    March 11, 2020 at 2:59 pm #1192306
    beenee

    Thanks Rikard,
    its the same result :-(
    Is there any way to create a new menu and activate it with the burger menu? I guess it has to do with the second layer menu entries which are automatically showing here… It works fine on the real mobile view… Any more ideas?
    Best
    Stefan

    March 12, 2020 at 4:12 am #1192472
    Rikard

    Hi Stefan,

    Yes, you can do that under Enfold->Main Menu->General, look for the Alternate Menu for Mobile option.

    Best regards,
    Rikard

    May 6, 2020 at 2:00 pm #1210343
    beenee

    Hello Again, (Sorry had to take a break on this due to the Corona outbreak)

    This Problem still persists, what have I done so far:
    – set a designated menu (Enfold->Main Menu->General)
    – eliminated all extra coding in styles css what where dealing with burger menu
    – deactivated all plugins and tried
    – tried a plugin (WP Mobile Menu – The Mobile-Friendly Responsive Menu)

    still the formating/style of the mobile menu is a desaster… mainly 2nd level menu issues I guess…
    Could you please have another look?
    Best regards
    Stefan

    May 7, 2020 at 6:52 am #1210616
    Rikard

    Hi Stefan,

    Thanks for the update, I can’t load your site though. Did you move it?

    Best regards,
    Rikard

    May 7, 2020 at 10:31 am #1210671
    beenee

    Hi Rikard,
    it’s still at the same place and I can reach it…
    best
    S.

    May 8, 2020 at 6:59 am #1210936
    Rikard

    Hi,

    Thanks for the update, your site is working now. Please send us a temporary WordPress admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Best regards,
    Rikard

    May 10, 2020 at 2:00 pm #1211645
    beenee

    Hi Rikard,
    thanks for this…
    Access provided…
    Best
    Stefan

    May 11, 2020 at 6:36 am #1211743
    Rikard

    Hi Stefan,

    This code is the problem:

    ul.sub-menu {
width: 300px!important;
margin-left: 8px!important;
margin-top:-32%!important;
}

    If you comment out the -32% argument in your style.css then you will see that is goes back to normal. I’m not sure if that CSS is uses on your desktop version though? If so then please try placing it in a media query instead:

    @media only screen and (min-width: 768px) {
ul.sub-menu {
width: 300px!important;
margin-left: 8px!important;
margin-top:-32%!important;
}
}

    Best regards,
    Rikard

    May 13, 2020 at 12:40 pm #1212589
    beenee

    Thanks Rikard,…spot on!!!
    The mobile menu works now!!

    Could you see why ‘only’ the English menu is different from the German menu (it slips 10px down) when I add this code?

    nav.main_menu .av-main-nav {
	font-size: 1.3vw!important;
	text-decoration: none;
	margin-top: 10px!important;
}

    I don’t get it as the styles.css is the same for both languages…? I need to place the main menu further down and the dropdon aligned with the slider image.

    txs a lot,
    Stefan

    May 14, 2020 at 7:23 am #1212857
    Rikard

    Hi Stefan,

    I can’t see any difference between the two languages on my end, did you remove the code?

    Best regards,
    Rikard

    May 14, 2020 at 12:09 pm #1212922
    beenee

    Really sorry Rikard, I haven’t fully understood why, but I managed to align the German and the English menu…(and forgot to let you know…)

    I did that by eliminating css bits step by step….

    Still…. I need to place the main menu further down and the dropdown aligned with the slider image. Would you have a look at this please?

    May 15, 2020 at 9:48 am #1213201
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    nav.main_menu #avia-menu li a {
  line-height: 160px;
}

    Best regards,
    Rikard

    May 15, 2020 at 11:27 am #1213231
    beenee

    Thanks Rikard,
    this seems to do the ‘line-height’ in the dropdown menu. No effect on the main menu and dropdown over all position.
    I can’t seem to find the top menu / main menu css class (Using Hummingbird cache (del) – Browser ctrl -f5)
    Do you have a nother idea?
    txs S.

    May 16, 2020 at 2:06 pm #1213565
    Rikard

    Hi,

    Please try this instead:

    #top #header_main > .container .main_menu .av-main-nav > li > a {
    line-height: 160px !important;
}

    Best regards,
    Rikard

    October 21, 2021 at 1:50 pm #1325872
    beenee

    Topic solved! Thanks!

    October 22, 2021 at 6:59 am #1325995
    Rikard

    Hi,

    Thanks for the update. I’ll go ahead and close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Burger menu jumping’ is closed to new replies.