Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 15, 2018 at 1:56 pm #912755
    govus

    Hi!
    I’ve tried searching for some css that would make the burger menu appear on desktop when there are too many links in menu and they don’t fit on the screen anymore. I found some but it seems I couldn’t get them to work when using Logo center, menu below setup. I’d be happy if you provided the correct css code for achieving that :)

    The site in question is linked in private section. Thanks for great support so far!

    February 16, 2018 at 5:19 am #913107
    Rikard

    Hey govus,

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

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

    February 16, 2018 at 10:31 am #913195
    govus

    Thanks, that works otherwise but there are two burgers, the one under the logo where the text menu used to be, I don’t need :D

    When I inspect the element, I guess we don’t want the element “avia-menu av-main-nav-wrap” to be displayed…

    February 17, 2018 at 5:38 am #913478
    Rikard

    Hi,

    Thanks for the feedback, though I can’t reproduce that error on my end. We will need to be able to inspect the actual element you need to remove to be able to give you correct code.

    Best regards,
    Rikard

    February 17, 2018 at 5:54 pm #913687
    govus

    I made you a user account, check private section! I purged the page from cache, if that helps…

    After adding your code, the result is as intended except for the second burger below the logo :D
    Can we remove it and the container it is in?

    February 18, 2018 at 8:06 am #913812
    Victoria

    Hi govus,

    Please edit the code from above to look like this, you can put the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    

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

    If you need further assistance please let us know.

    Best regards,
    Victoria

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