Jak Ustawić Breakpoint w Nawigacji Mobilnej i Desktopowej w WordPress FSE

Jak Ustawić Punkt Przerwania w Nawigacji Mobilnej i

Wprowadzenie punktu przerwania w nawigacji WordPress Full Site Editing (FSE) umożliwia dostosowanie menu do różnych rozdzielczości ekranów. W tym artykule dowiesz się, jak skonfigurować nawigację, aby automatycznie przełączała się między widokiem mobilnym a desktopowym.

Dodanie Stylów CSS

Najpierw dodaj niestandardowe style CSS, które definiują wygląd menu na różnych urządzeniach:

@media (max-width: 799px) {
    .wp-block-navigation {
        --navigation-layout-direction: column!important;
        --navigation-layout-justify: initial;
        --navigation-layout-align: flex-start;
    }
    .wp-block-navigation__responsive-container,
    .wp-block-navigation__responsive-container-open,
    .wp-block-navigation__responsive-container-open:not(.always-shown){
        display: flex;
    }
    .wp-block-navigation__responsive-container-open{
        z-index: 1;
    }
    .wp-block-navigation__container{
        display: none;
    }
    .wp-block-navigation__responsive-container-close {
        display: block;
    }
}
@media (min-width: 800px) {
    .wp-block-navigation {
        --navigation-layout-direction: row!important;
        --navigation-layout-justify: flex-start;
        --navigation-layout-align: center;
    }
    .wp-block-navigation__container {
        display: flex;
    }
    .wp-block-navigation__responsive-container,
    .wp-block-navigation__responsive-container-open,
    .wp-block-navigation__responsive-container-close,
    .wp-block-navigation__responsive-container-open:not(.always-shown)
    {
        display: none;
    }
}

Desktopowej w WordPress FSE

Stara Wersja

Wprowadzenie punktu przerwania w nawigacji WordPress Full Site Editing (FSE) umożliwia dostosowanie menu do różnych rozdzielczości ekranów. W tym artykule dowiesz się, jak skonfigurować nawigację, aby automatycznie przełączała się między widokiem mobilnym a desktopowym.

Dodanie Stylów CSS

Najpierw dodaj niestandardowe style CSS, które definiują wygląd menu na różnych urządzeniach:

/* ############################## NAVIGATION BREAKPOINT ########################### */
/* Zmiana domyślnego css WordPress na zapytanie medialne 1023px */
@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;
    }
}
/* Usunięcie domyślnego css WordPress dla 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;
    }
}

Konfiguracja Punktu Przerwania

Następnie ustaw punkt przerwania (breakpoint) w CSS, aby zmienić wygląd nawigacji po przekroczeniu określonej szerokości ekranu.

Testowanie i Dostosowanie

Przetestuj nawigację na różnych urządzeniach i dostosuj style w razie potrzeby. Dzięki tym krokom Twoje menu będzie bardziej responsywne, a użytkownikom łatwiej będzie się poruszać po stronie.

Wróć