Could be done via. this CSS (to be added globally), the following worked for me:
/* =================== / / = Anpassungen Mobile und Tablet = / / =================== */
/= Bis Tablet Hochkant (max 1024px) -> nur Hamburger & Overlay =/
@media (max-width: 1024px) {
/* Versteckt das normale Menü */
nav.wp-block-navigation > .wp-block-navigation__container {
display: none ;
}
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-container-open {
display: none !important;
}
/* Zeigt den Hamburger-Button */
.wp-block-navigation__responsive-container-open {
display: inline-flex !important;
}
/* Overlay-Container sichtbar, wenn geöffnet */
.wp-block-navigation__responsive-container.has-modal-open {
display: block !important;
}
}
Thread Starter
New_WP
(@baxter89)
Thanks for your feedback, I used ChatGPT to create the CSS that works on my end and I’m sharing it.
/* ================================
Forcer le menu burger dès 992px pour le mode tablette
================================ */
@media (max-width: 1024px) {
/* Masquer le menu desktop tant qu’il n’est pas ouvert */
.wp-block-navigation__responsive-container:not(.is-menu-open) {
display: none !important;
}
/* Afficher le bouton burger */
.wp-block-navigation__responsive-container-open {
display: flex !important;
justify-content: flex-end;
align-items: center;
cursor: pointer;
}
/* Quand le menu est ouvert */
.wp-block-navigation__responsive-container.is-menu-open {
display: block !important;
width: 100%;
background: #fff;
padding: 1rem 1.5rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border-bottom: 1px solid #eee;
}
/* Liens du menu mobile */
.wp-block-navigation__responsive-container.is-menu-open a {
display: block;
padding: 0.75rem 0;
font-size: 1.1rem;
font-weight: 500;
color: #111;
text-decoration: none;
}
}
