{"id":298,"date":"2024-05-29T14:34:50","date_gmt":"2024-05-29T12:34:50","guid":{"rendered":"https:\/\/intranet.projektninja.com\/?p=298"},"modified":"2024-06-15T23:51:16","modified_gmt":"2024-06-15T21:51:16","slug":"wp-fse-navigation-breakpoint-mobile-desktop-menu","status":"publish","type":"post","link":"https:\/\/projektninja.com\/devblog\/nawigacja\/wp-fse-navigation-breakpoint-mobile-desktop-menu\/","title":{"rendered":"Jak Ustawi\u0107 Breakpoint w Nawigacji Mobilnej i Desktopowej w WordPress FSE"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Jak Ustawi\u0107 Punkt Przerwania w Nawigacji Mobilnej i <\/h2>\n\n\n\n<p>Wprowadzenie punktu przerwania w nawigacji WordPress Full Site Editing (FSE) umo\u017cliwia dostosowanie menu do r\u00f3\u017cnych rozdzielczo\u015bci ekran\u00f3w. W tym artykule dowiesz si\u0119, jak skonfigurowa\u0107 nawigacj\u0119, aby automatycznie prze\u0142\u0105cza\u0142a si\u0119 mi\u0119dzy widokiem mobilnym a desktopowym.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dodanie Styl\u00f3w CSS<\/h3>\n\n\n\n<p>Najpierw dodaj niestandardowe style CSS, kt\u00f3re definiuj\u0105 wygl\u0105d menu na r\u00f3\u017cnych urz\u0105dzeniach:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (max-width: 799px) {\n    .wp-block-navigation {\n        --navigation-layout-direction: column!important;\n        --navigation-layout-justify: initial;\n        --navigation-layout-align: flex-start;\n    }\n    .wp-block-navigation__responsive-container,\n    .wp-block-navigation__responsive-container-open,\n    .wp-block-navigation__responsive-container-open:not(.always-shown){\n        display: flex;\n    }\n    .wp-block-navigation__responsive-container-open{\n        z-index: 1;\n    }\n    .wp-block-navigation__container{\n        display: none;\n    }\n    .wp-block-navigation__responsive-container-close {\n        display: block;\n    }\n}\n@media (min-width: 800px) {\n    .wp-block-navigation {\n        --navigation-layout-direction: row!important;\n        --navigation-layout-justify: flex-start;\n        --navigation-layout-align: center;\n    }\n    .wp-block-navigation__container {\n        display: flex;\n    }\n    .wp-block-navigation__responsive-container,\n    .wp-block-navigation__responsive-container-open,\n    .wp-block-navigation__responsive-container-close,\n    .wp-block-navigation__responsive-container-open:not(.always-shown)\n    {\n        display: none;\n    }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Desktopowej w WordPress FSE<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">Stara Wersja<\/h2>\n\n\n\n<p>Wprowadzenie punktu przerwania w nawigacji WordPress Full Site Editing (FSE) umo\u017cliwia dostosowanie menu do r\u00f3\u017cnych rozdzielczo\u015bci ekran\u00f3w. W tym artykule dowiesz si\u0119, jak skonfigurowa\u0107 nawigacj\u0119, aby automatycznie prze\u0142\u0105cza\u0142a si\u0119 mi\u0119dzy widokiem mobilnym a desktopowym.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dodanie Styl\u00f3w CSS<\/h3>\n\n\n\n<p>Najpierw dodaj niestandardowe style CSS, kt\u00f3re definiuj\u0105 wygl\u0105d menu na r\u00f3\u017cnych urz\u0105dzeniach:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* ############################## NAVIGATION BREAKPOINT ########################### *\/\n\/* Zmiana domy\u015blnego css WordPress na zapytanie medialne 1023px *\/\n@media (min-width: 796px) {\n    .wp-block-navigation__responsive-container-open:not(.always-shown) {\n        display: none !important;\n    }\n    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {\n        display: block !important;\n        width: 100%;\n        position: relative;\n        z-index: auto;\n        background-color: inherit;\n    }\n}\n\/* Usuni\u0119cie domy\u015blnego css WordPress dla 600px *\/\n@media (min-width: 600px) {\n    .wp-block-navigation__responsive-container-open:not(.always-shown) {\n        display: flex;\n    }\n    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {\n        display: none;\n    }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Konfiguracja Punktu Przerwania<\/h3>\n\n\n\n<p>Nast\u0119pnie ustaw punkt przerwania (breakpoint) w CSS, aby zmieni\u0107 wygl\u0105d nawigacji po przekroczeniu okre\u015blonej szeroko\u015bci ekranu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Testowanie i Dostosowanie<\/h3>\n\n\n\n<p>Przetestuj nawigacj\u0119 na r\u00f3\u017cnych urz\u0105dzeniach i dostosuj style w razie potrzeby. Dzi\u0119ki tym krokom Twoje menu b\u0119dzie bardziej responsywne, a u\u017cytkownikom \u0142atwiej b\u0119dzie si\u0119 porusza\u0107 po stronie.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dowiedz si\u0119, jak skonfigurowa\u0107 nawigacj\u0119 w WordPress FSE, aby automatycznie prze\u0142\u0105cza\u0142a si\u0119 mi\u0119dzy widokiem mobilnym a desktopowym.<\/p>\n","protected":false},"author":1,"featured_media":556,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[268],"tags":[123,25,151,102,153,152,48,150,148,149,137,13,154],"class_list":["post-298","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nawigacja","tag-breakpoint","tag-css","tag-desktopowe-menu","tag-fse","tag-full-site-editing","tag-mobilne-menu","tag-nawigacja","tag-punkt-przerwania","tag-responsywnosc","tag-tutorial","tag-web-development","tag-wordpress","tag-zarzadzanie-strona"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/comments?post=298"}],"version-history":[{"count":7,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/298\/revisions"}],"predecessor-version":[{"id":708,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/298\/revisions\/708"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media\/556"}],"wp:attachment":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media?parent=298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/categories?post=298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/tags?post=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}