Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 20, 2018 at 1:58 am #929455
    msg8891

    Is there a way to force the menu to drop below the logo when the browser size is below a specific width, but over 768px? I want it to go to the mobile view after 768px, but I want to make sure the menu does not overlap the logo between 768px and when it starts to do that.

    Thank you

    March 20, 2018 at 9:28 am #929607
    Victoria

    Hey msg8891,

    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 (max-width: 1024px) {
  nav.main_menu {
    display: block;
  }
  .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
  .html_header_top #top .av_header_stretch .container {
    max-width: 90%;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 20, 2018 at 3:46 pm #929892
    msg8891

    Thank you. Not exactly what I was looking for, but it definitely solves the overlap problem.

    I was looking to see if there was a way that would force the menu to go below the logo, aligned left, right,or center, when the browser screen was above 768px and below the px where the menu overlaps the logo.

    If that’s not possible or easily done, this will do.

    Thanks again

    March 20, 2018 at 4:56 pm #929957
    Vinay

    Hi,

    Unfortunately, it would require quite some time and customization of the theme to achieve this. However, if you do not like to activate the burger menu just before the menu bumps the logo, as an alternate solution the menu items can be arranged in multi-line. More info in private content.

    Best regards,
    Vinay

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