Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 9, 2017 at 10:56 am #836271
    jonrouse

    Hi, I used to know the CSS for this, but it seems like things have changed a bit.

    Basically, on smaller screens, the menu hits the logo. I want the mobile menu to display at 1080px and under.

    Can you please help? I want to show the dev site to the client, but with this and the other issue, I can not until they are resolved.

    Thanks

    August 10, 2017 at 12:17 pm #836931
    Victoria

    Hey jonrouse,

    The code below, reduces padding for the menu items, so the menu fits. If you still need the burger menu at 1080, please let me know.
    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

    
@media only screen and (min-width: 991px) and (max-width: 1060px) {
  .av-main-nav > li > a {
      padding: 0 6px;
  }
}
@media only screen and (min-width: 1061px) {
  .av-main-nav > li > a {
      padding: 0 13px;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    August 10, 2017 at 1:30 pm #836961
    jonrouse

    Thanks Victoria.

    That works, but I’d prefer the burger menu. The 6px padding look too tightly spaced.
    If that’s the only thing that works, that’s fine, but I use this on another Enfold site

    @media screen and (max-width: 1060px) {
#advanced_menu_toggle { display: block !important; }
nav.main_menu { display: none !important; }
}

    But on the newer version of Enfold, it seems to hide the navigation completely below 1060px.

    August 10, 2017 at 1:30 pm #836962
    jonrouse

    I’ve just been playing around and think that this might work

    
@media screen and (max-width: 1060px) {
#advanced_menu_toggle { display: .av-hamburger !important; }
nav.main_menu { display: none !important; }
}
    August 10, 2017 at 1:33 pm #836964
    jonrouse

    No it doesn’t! It did for a minute, then stopped!

    August 14, 2017 at 6:23 pm #838860
    Nikko

    Hi,

    Can you try using this css code:

    @media screen and (max-width: 1080px) {
  #top .av-main-nav li.menu-item {
    display: none;
  }

  #top .av-main-nav li.menu-item-avia-special {
    display: block;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

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