Próg zawijania menu do mobilki można ustalić w:
wp-includes/blocks/navigation/style.min.css
Domyślny próg jest między 599px a 600px with.
Opcja z podstronami ze wszystkim rozwiniętym, mieszczącym się w pionie na mobile’u.
Menu mobilne w modelu fse z bloków ma dość skomplikowaną strukturę, i trzeba się czasem nieźle namęczyć żeby zdefinoiować sobie odpowiedni wygląd.
@media(max-width:599px) {
#modal-1.is-menu-open {
height: fit-content;
/* zmniejszenie otwartego menu do potrzebnej wysokości żeby nie przysłaniało całej strony */
padding-bottom: 15px;
box-shadow: rgb(0 0 0 / 20%) 0px 9px 20px;
}
#modal-1-content {
gap: 0px;
padding-top: 0;
}
#modal-1-content > ul {
/* wyśrodkowanie menu*/
margin: auto;
}
.wp-block-navigation__responsive-dialog {
display: flex;
justify-content: center;
flex-direction: column;
}
#modal-1-content .wp-block-navigation li {
/* elementy menu rozciągniecie do możliwego miejsca odstępy i podziałka borderem*/
width: 100%;
border-bottom: 2px #0000002e solid;
padding-top: 5px;
padding-bottom: 5px;
}
#modal-1-content .wp-block-navigation li > a {
width: 100%;
/*rozciągnięcie klikalnosci na czałąszerokość*/
}
/* korekta podziałek borderów */
#modal-1-content .wp-block-navigation li:first-child {
border-top: 2px #0000002e solid;
}
#modal-1-content .wp-block-navigation li:last-child {
border-bottom: none;
}
/* submenu */
ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
position: relative;
padding-top: 0px !important;
padding-right: 0 !important;
padding-left: 15px !important;
padding-bottom: 5px;
position: relative !important;
top: 7px !important;
}
/* zaykacz menu wyśrodkowanie */
button.wp-block-navigation__responsive-container-close {
position: static;
margin: auto;
margin-top: 20px;
}
/* wyłączenie sociala z mobilki*/
.wp-block-social-links {
display: none !important;
}
}