Scusate il doppio post ma è subentrata una ulteriore esigenza, per la quale necessito ancora di supporto.
Volendo inserire nel pannello del menu-mobile ulteriori elementi (logo in alto e una sorta di footer in basso), avevo pensato di inserire tali elementi con pseudoclassi before e after prima e dopo il menu.
Ho così testato questa soluzione "artigianale":
codice:
ul#menu-menu-bonlaw.header__menu:before { position: absolute;
content: "";
height: 59px !important;
width: 200px !important;
background-size: 200px 59px !important;
margin-top: 5px !important;
background-repeat: no-repeat;
background-position: center;
background-image: url('https://miopercorso/Logo.png');
margin-top: -70px !important;
margin-left: 25px;
}
Mi sono accorto tuttavia che questa strada risulta molto limitante, non potendo articolare bene la struttura html del footer mediante una pseudo-classe.
Così ho cambiato approccio e modificato la struttura html, creando un div che contiene la versione desktop del menu ed un'altro che contiene quella mobile.
I rispettivi div vengono nascosti alternativamente a seconda della risoluzione, ecco il codice che ho adottato:
codice:
<div id="desktop-menu">
<?php /* Main Navigation */ wp_nav_menu( array(
'theme_location' => 'header',
'depth' => 2,
'container' => false,
'menu_class' => 'header__menu'
)
);
?>
</div>
<div id="mobile-menu-panel">
<div>test</div>
<?php /* Main Navigation */
wp_nav_menu( array(
'theme_location' => 'header',
'depth' => 2,
'container' => false,
'menu_class' => 'header__menu'
)
);
?>
</div>
codice:
/* Desktop */@media (min-width: 920px) {
#mobile-menu-panel {
display: none;
}
}
/* Smartphone */
@media (max-width: 920px) {
#desktop-menu {
display: none;
}
}
Nel "mobile-menu-panel" ho inserito solo un div "test" per verificare il funzionamento di tale soluzione.
Il problema è appunto che non funziona, nel senso che nel sorgente della pagina non visualizzo nessuna delle modifiche html che ho apportato.
Non riesco davvero a darmi una spiegazione...spero nel vostro supporto!
Grazie!
EDIT: mi sbagliavo, forse non avevo cancellato correttamente la cache.
Le modifiche vengono apportate, ma non vanno bene, in quanto il div "test" viene visualizzato nella parte desktop e non in quella mobile...
Penso che l'errore principale dipenda dal fatto che con questo approccio andrebbe modificato anche il JS che comando l'apertura del pannello tramite hamburger, in quanto dovrebbe essere riferita al nuovo DIV e non al menu.
E' corretto?
Non vado oltre nei testo perché temo di fare casino, resto in attesa del vostro supporto, grazie!