Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 9, 2018 at 6:17 am #970276
    sundara88

    Hi,
    My menu below the header is full width but still not wide enough for all menu items on screens of 900px and smaller.
    I’ve tried this css to make the icon menu appear earlier however the main menu disappears but the icon (mobile) menu does not appear until at much smaller screen.
    @media only screen and (max-width: 900px) {
    nav.main_menu {
    display:none;
    }
    .av-burger-menu-main.menu-item-avia-special.av-small-burger-icon {
    display: block !important;
    }}
    I hope you can have a look and see what the problem is.
    Thank you,
    Lisa

    June 10, 2018 at 6:17 am #970606
    Rikard

    Hey sundara88,

    Please try this instead:

    @media only screen and (max-width: 900px) {
  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

    June 10, 2018 at 7:54 am #970652
    sundara88

    Hi Rikard,
    Thanks, that works great, I just deleted:
    nav.main_menu {
    display: block !important;
    }
    because two burger menu’s showed up :)
    Thank you!

    June 10, 2018 at 9:04 am #970687
    Rikard

    Hi,

    Great, glad you got it working :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    June 10, 2018 at 9:06 am #970690
    sundara88

    You can close this
    Thanks!

    June 11, 2018 at 7:43 am #970952
    Rikard

    Hi,

    Thanks for letting us know. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘mobile menu not appearing on time’ is closed to new replies.