Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #929455

    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


    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;
      } {
        display: block;
      .html_header_top #top .av_header_stretch .container {
        max-width: 90%;

    If you need further assistance please let us know.

    Best regards,


    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



    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,

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.