Nel template di WordPress “Avada” (numero uno nei download di themeforset nella categoria WordPress) il top menu su mobile presenta degli errori, in quanto tutti i sub menu sono invisibili ma occupano comunque lo spazio all’interno della pagina. La causa di questo errore è appunto la modalità con cui vengono nascosti i menu, sia nella versione mobile che in quella desktop. Per risolverlo è necessario riscrivere la parte di codice CSS che si occupa di mostrare e nascondere i sub menu. Per fare questo aprite il file “wp-content/themes/Avada/style.css” e cercate questo blocco di regole (nella versione 3.4.3 si trova alla riga 142 – 151)

[css]

.nav-holder .fusion-navbar-nav > li > ul, .nav-holder .fusion-navbar-nav > li > div, .nav-holder .fusion-navbar-nav .fusion-dropdown-menu ul,
.top-menu li > div, .top-menu li > .sub-menu {
-webkit-transition: opacity .2s ease-in;
-moz-transition: opacity .2s ease-in;
-o-transition: opacity .2s ease-in;
transition: opacity .2s ease-in;
z-index:-1;
visibility:hidden;
opacity:0;
}

[/css]

Questo blocco va sostituito con due nuovi blocchi che modifichino la proprietà “max-height” invece di opacity.

[css]

.nav-holder .fusion-navbar-nav > li > ul, .nav-holder .fusion-navbar-nav > li > div, .nav-holder .fusion-navbar-nav .fusion-dropdown-menu ul,
.top-menu li > div, .top-menu li > .sub-menu {
z-index:-1;
visibility:hidden;
opacity:0;
max-height: 0;
-webkit-transition: max-height .2s ease-in;
-moz-transition: max-height .2s ease-in;
-o-transition: max-height .2s ease-in;
transition: max-height .2s ease-in;
}

.nav-holder .fusion-navbar-nav > li > ul:hover, .nav-holder .fusion-navbar-nav > li > div, .nav-holder .fusion-navbar-nav .fusion-dropdown-menu ul:hover,
.top-menu li > div, .top-menu li:hover > .sub-menu {
max-height: 500px;
opacity: 1;
background-color: #4C4C4C;
-webkit-transition: max-height .2s ease-in;
-moz-transition: max-height .2s ease-in;
-o-transition: max-height .2s ease-in;
transition: max-height .2s ease-in;
}

[/css]

Fatto questo il vostro menu mobile sarà pronto per essere visualizzato su qualunque dispositivo mobile senza enormi spazi vuoti, in più avrete aggiunto un eccezionale effetto “slide” ai vostri sub menu.