Mobile main menu missing after Enfold update

Hey kvpacs,

Clear your cache (mainly if you use some cache plugin) and check if it works.

Best regards,
John Torvik

Hi,

I can see you are having a child theme – and most probably your child theme has a header.php file.
The issue is there, the mobile is not working because header file needs to get the new updates.

Best regards,
Basilis

Hi Theresa,

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: 767px) {
  nav.main_menu {
      display: block !important;
  }
}

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

Hi Theresa,

Well, we have an issue with that. Below is the thread about it:

And here is yet another slight adjustment to the menu

@media only screen and (min-width: 1024px) {
  .av-main-nav > li > a {
    padding: 0 8px;
  }
}
@media only screen and (min-width: 1100px) {
  .av-main-nav > li > a {
    padding: 0 13px;
  }
}

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

Hi,

Please take a look at the topic here

which will explain how to do things.
Thank you

Best regards,
Basilis

Hi Theresa,

The code below will show the menu as text from 990px without any overlap, if you want to make it a burger manu, let us know till what screen size.
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: 990px) and (max-width: 1023px){
  .av-main-nav > li > a {
    padding: 0 5px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1099px) {
  .av-main-nav > li > a {
    padding: 0 8px;
  }
}
@media only screen and (min-width: 1100px) {
  .av-main-nav > li > a {
    padding: 0 13px;
  }
}
@media only screen and (max-width: 1100px) {
  .html_mobile_menu_tablet .main_menu {
    display: block !important;
  }
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi Nicole Scalessa,

We are very sorry to hear that, the new version introduced the new modern menu and turned out to be a bit more challenging. We are here to help you. Do not copy the code above, it looks like you issue is a bit different.
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

Best regards,
Victoria

Hi Theresa,

Yes, that’s exactly what the code does. Show the menu as text, but reduce paddings, so that the menu does not overlap the logo.

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: 1100px) {
  .html_mobile_menu_tablet .main_menu {
    display: block;
  }
  .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi Nicole,

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: 768px) and (max-width: 1023px) {
.main_menu ul.social_bookmarks {
  display: none;
}
div .logo {
  width: 80%;
  padding-top: 3%;
}
.header-scrolled.header-scrolled-full div .logo,
.header-scrolled div .logo  {
  padding-top: 0%;
}
}

If you need further assistance please let us know.

Best regards,
Victoria