/*/////////////////////////////////////////////////// NAVIGATION BREAJKPOINT ////////////////////////////////////////////////////*/
/* Change the WordPress default css to a 1023px media query */
@media (min-width: 796px) {
.wp-block-navigation__responsive-container-open:not(.always-shown) {
display: none !important;
}
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: block !important;
width: 100%;
position: relative;
z-index: auto;
background-color: inherit;
}
}
/* Remove the WordPress default for 600px */
@media (min-width: 600px) {
.wp-block-navigation__responsive-container-open:not(.always-shown) {
display: flex;
}
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: none;
}
}
Menu FSE mobile animowany zjazd wyjazd
Domyślnie zamknięte manu ma display none, zmieniamy mu klasę na display flax tak jak otwarte i nadajemu mu ujemny „top” o jego wysokość , aby schować je nad krawędzią obrazu.
Ustalamy transition dla top.
#modal-1 {
transition:top 0.4s;
top: -277px;/* wysokość menu */
display: flex;
}
Wszystko co pozostaje to gdy jest otwarte i dostaje klase is-menu-open zmieniamy top na 0;
#modal-1.is-menu-open{
top: 0px;
}Fix brak current-menu-item on home w menu
window.onload = function () {
var zakladkaHome = document.getElementsByClassName('wp-block-navigation-item')[0];
if (window.location.href == "https://projektninja.com/") {
zakladkaHome.classList.add('current-menu-item');
} else {
zakladkaHome.classList.remove('current-menu-item');
}
}Nawigacja Doklejana
Nawigacja która nie znajduje się na górze strony ale przykla się do niej gdy zescolluje się stronę poniżej jej
Nad nawigacją umieszczamy pusty element z id=”nawigacja-polorznie” który będzie referencją połlorzenia normalnego nawigacji gdy nawigacja dolei się i bedzie miała połorzenie top0 na position fixed.
<div id="nawigacja-polorzenie"></div>
<div id="nawigacja">....</div>Do tego css jak ma wyglądać nawigacja przyklejona:
#nawigacja.zescollowana {
position: fixed;
top: 0px;
width: 100%;
}
I nasz js sterujący nadaniem klasy „przescollowana” gdy element nawigacja polorzenie znajdzie się nad lnią foldu:
document.addEventListener("DOMContentLoaded", function () {
var nawigacjaPolorzenie = document.getElementById("nawigacja-polorzenie");
var nawigacjaElement = document.getElementById("nawigacja");
var czyZescrollowany = false;
function obslugaPrzewijania() {
var prostokat = nawigacjaPolorzenie.getBoundingClientRect();
// Sprawdź, czy górna część elementu jest powyżej widoku
if (prostokat.top <= 0) {
nawigacjaElement.classList.add("zescollowana");
czyZescrollowany = true;
} else if (czyZescrollowany && prostokat.bottom >= 0) {
nawigacjaElement.classList.remove("zescollowana");
czyZescrollowany = false;
}
}
// Dodaj nasłuchiwanie zdarzenia przewijania z opóźnieniem
var debounceTimer;
window.addEventListener("scroll", function () {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(obslugaPrzewijania, 50);
});
// Sprawdź początkowy stan przy ładowaniu strony
obslugaPrzewijania();
});Sparkle FSE menu mobilne z submenu w nowym blok edytorze
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;
}
}Custome elements in WordPress menu
add_filter( 'wp_nav_menu_items', 'your_custom_menu_item');
function your_custom_menu_item ( $items) {
$items = '<li><a href="https://www.facebook.com/postepstudio" target="_blank" class="ikonka-sobial-menu-main-a"><img alt="FB" class="ikonka-sobial-menu-main-img" src="http://postepstudio.pl/wp-content/uploads/ikonki_main_facebook_120x120_postepstudio.png"></a></li>
<li><a href="https://www.instagram.com/postepstudio/" target="_blank" class="ikonka-sobial-menu-main-a"><img alt="IG" class="ikonka-sobial-menu-main-img" src="http://postepstudio.pl/wp-content/uploads/ikonki_main_ig_120x120_postepstudio.png"></a></li>
<li><a href="https://www.youtube.com/channel/UChk4T-PQT_kQwE0AgH4Vp3w" target="_blank" class="ikonka-sobial-menu-main-a"><img alt="YT" class="ikonka-sobial-menu-main-img" src="http://postepstudio.pl/wp-content/uploads/ikonki_main_yt_120x120_postepstudio.png"></a></li>
<!--<li><a href="" target="_blank" class="ikonka-sobial-menu-main-a"><img alt="TikTok" class="ikonka-sobial-menu-main-img" src="http://postepstudio.pl/wp-content/uploads/ikonki_main_tiktok_120x120_postepstudio.png"></a></li>-->
<li id="social-media-menu-separator"></li>
'.$items;
return $items;
}