Menu: the 2nd menu line is overlapping page content

Hey SanKlei,

Please try this in Quick CSS to activate the mobile menu at an earlier point:

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

Hi,

Please paste in the Quick CSS box under Enfold->General Styling.

Best regards,
Rikard

Hi,

You can upload screenshots to a service like Google Drive, Dropbox, Imgur, Snipboard etc, then link to them here.

Best regards,
Rikard

Hi,

Thanks for the screenshots. How exactly are you looking to change the behaviour of the menu?

Best regards,
Rikard

Hi,

Thanks for the clarification. That is the reason I suggested CSS to activate the mobile menu at an earlier point, there’s not enough room to accomodate all the menu items on smaller screen sizes.

Best regards,
Rikard

Hi,

Please try this CSS instead:

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

Best regards,
Rikard

Hi,

Thank you for the inquiry.

Regarding the logo shrinking on smaller screens and the burger menu/search icon overlapping, you can add the following css to Enfold > General Styling > Quick CSS field:

@media only screen and (max-width: 1290px) {
  .responsive #top .logo img {
    max-width: 62%;
  }

  #avia-menu {
    margin-right: 0;
    padding-right: 0;
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top .logo img {
    max-width: 35%;
  }
}

Adjust the max-width value as needed to fit your logo within the header. Please make sure to purge the cache before testing.

Let us know if the issue persists.

Best regards,
Ismael