Menu Not Displayed Entirely

Hey ramonolivencia,

It looks fine on my end on 24″ monitor: https://snipboard.io/yG19XK.jpg. You might want to group some of the menu options, or use the Mega Menu option if you want to take smaller screens into account.

Best regards,
Rikard

Hi,

The only option I can think of other than the ones I wrote above, would be to activate the mobile menu at an earlier point. Let us know if you would like to go for that option.

Best regards,
Rikard

Hi,

The mobile menu would be activated at a larger screen size, would you like to try that?

Best regards,
Rikard

Hi,

You can try this in Quick CSS to change the menu to the mobile menu at an earlier point:

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

Simply change the 1024 value to the pixel value of your choice.

Please try this in order to change the colour of the mega menu titles:

#header .mega_menu_title {
  color: #000;
}

Best regards,
Rikard

Hi,

The modification above should adjust the breakpoint of the mobile menu and display it when the screen width is less than 1024px. You can adjust the breakpoint by editing the max-width value in this line.

@media only screen and (max-width: 1024px) {

However, instead of making the modifications above, have you considered moving the phone number above the main header to create room for the main menu? You can adjust this in the Enfold > Header > Extra Elements > Header Phone Number/Extra Info settings.

Best regards,
Ismael