Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak utworzyć przypięte pływające menu nawigacyjne w WordPress?

Górne menu nawigacyjne na stronie internetowej zazwyczaj zawiera linki do wszystkich najważniejszych stron. Po przyklejeniu tego menu można zachować je na ekranie, gdy użytkownik przewija stronę w dół. W ten sposób jest ono zawsze pod ręką.

Dzięki temu nawigacja jest bardziej dostępna, umożliwiając użytkownikom szybkie przechodzenie do różnych sekcji witryny bez konieczności przewijania do góry. Naszym zdaniem korzystanie z lepkiego menu może pomóc zwiększyć zaangażowanie i poprawić ogólną użyteczność witryny.

W tym artykule pokażemy, jak łatwo dodać przypięte pływające menu nawigacyjne do twojej witryny internetowej WordPress.

Creating a sticky floating navigation menu in WordPress

Czym jest przypięte pływające menu nawigacyjne?

Przypięte lub pływające menu nawigacyjne „przykleja się” do górnej części ekranu, gdy użytkownik przewija w dół, dzięki czemu jest cały czas widoczne na ekranie.

Zazwyczaj górne menu nawigacyjne w WordPress zawiera odnośniki do najważniejszych treści twojej witryny internetowej. Dzięki przypiętemu menu odwiedzający mogą kliknąć te odnośniki w dowolnym momencie bez konieczności przewijania strony.

A sticky navigation menu in action on our demo website

Jeśli prowadzisz sklep internetowy, górne menu nawigacyjne zazwyczaj zawiera linki do stron przeznaczonych do konwersji, takich jak strona kasy i koszyk klienta. Przyklejenie górnego menu może często zmniejszyć liczbę porzuceń koszyka i zwiększyć sprzedaż.

Biorąc to pod uwagę, zobaczmy, jak łatwo stworzyć przypięte pływające menu nawigacyjne w dowolnym motywie WordPress lub sklepie WooCommerce. Wystarczy skorzystać z poniższych odnośników, aby przejść do wybranej metody:

Metoda 1: Dodanie przypiętego menu za pomocą ustawień twojego motywu (proste)

Niektóre z najlepszych motywów WordPress mają wbudowaną obsługę przypiętych menu nawigacyjnych. Mając to na uwadze, warto sprawdzić ustawienia twojego motywu, przechodząc do Motywy ” Dostosuj w kokpicie WordPress i szukając ustawień oznaczonych jako „Menu”.

Jeśli nie masz pewności, czy twój motyw obsługuje przypięte menu, możesz sprawdzić dokumentację motywu lub nawet skontaktować się z deweloperem w celu uzyskania pomocy. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat tego, jak prawidłowo poprosić o pomoc techniczną WordPress i ją uzyskać.

Jeśli twój motyw nie ma wbudowanej pomocy technicznej dla przypiętych menu, musisz użyć jednej z poniższych metod.

Metoda 2: Dodaj twoje przypięte menu nawigacyjne za pomocą wtyczki (zalecane)

Najprostszym sposobem na dodanie przypiętego menu nawigacyjnego w WordPressie jest użycie wtyczki Sticky Menu & Sticky Header. Pozwala ona na przypięcie wszystkiego, w tym menu.

Najpierw należy zainstalować i włączyć wtyczkę. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Po włączaniu przejdź do Ustawienia ” Przypięte menu (lub cokolwiek!).

The Sticky Menu plugin's settings page

Na początek musisz uzyskać identyfikator CSS menu nawigacyjnego, które chcesz uczynić przypiętym, korzystając z narzędzia inspekcji twojej przeglądarki.

Wystarczy odwiedzić witrynę i najechać kursorem myszy na menu nawigacyjne. Następnie kliknij prawym przyciskiem myszy i wybierz „Sprawdź” z menu przeglądarki.

Inspecting the navigation menu element on your website

Spowoduje to otwarcie nowego panelu wewnątrz przeglądarki, w którym można zobaczyć kod źródłowy menu nawigacyjnego.

Musisz znaleźć linię kodu, która odnosi się do menu lub nagłówka twojej witryny. Będzie on wyglądał mniej więcej tak:

<nav id="site-navigation" class="main-navigation" role="navigation">

Jeśli masz trudności ze znalezieniem kodu, najedź kursorem myszy na różne linie kodu w panelu „Inspect”. Po znalezieniu właściwego kodu przeglądarka podświetli menu nawigacyjne, jak widać na poniższym obrazku.

Finding the navigation menu ID using the inspect tool

W tym przypadku identyfikator CSS menu nawigacyjnego to witryna-nawigacja.

Gdy już uzyskasz te informacje, przełącz się z powrotem do kokpitu WordPress i dodaj je do pola „Przypięty element (wymagany)”.

Musisz również dodać znak hash (#) na początku, więc witryna-nawigacja staje się # witryna-nawigacja.

Entering the ID of the element that you want to make sticky (in this case, the navigation menu)

Następnie kliknij przycisk „Zapisz zmiany” u dołu strony, aby zapisać twoje zmiany.

Teraz, jeśli odwiedzisz swoją witrynę WordPress i przewiniesz ją, menu powinno pozostać na górze.

Viewing the sticky menu on your website

Czasami przypięte menu może nachodzić na treść, której nie chcesz ukrywać.

Jeśli tak się stanie, musisz zdefiniować odstęp między górną krawędzią ekranu a przyklejonym menu nawigacyjnym, wpisując liczbę w polu „Odstęp między górną krawędzią strony a przyklejonym elementem”.

How to create a sticky navigation menu in WordPress

Przypięte menu może powodować problemy na urządzeniach z mniejszymi ekranami, takich jak urządzenia mobilne. Mając to na uwadze, dobrym pomysłem jest sprawdzenie mobilnej wersji twojej witryny internetowej WordPress z komputera stacjonarnego.

Jeśli nie jesteś zadowolony z wyglądu menu, możesz je „odkleić” dla użytkowników mobilnych, znajdując następujące pole: „Nie przyklejaj elementu, gdy ekran jest mniejszy niż”.

Tutaj wpisz „780px”.

Unsticking the sticky navigation menu on mobile devices

Istnieje jeszcze kilka ustawień do zbadania, ale to wszystko, czego potrzebujesz, aby stworzyć działające przypięte menu nawigacyjne.

Kiedy będziesz zadowolony z konfiguracji menu nawigacyjnego, kliknij „Zapisz zmiany”, aby zapisać twoje ustawienia.

Metoda 3: Dodanie przypiętego pływającego menu nawigacji za pomocą kodu

Przypięte menu nawigacyjne można również utworzyć za pomocą CSS.

Najlepszym sposobem na dodanie własnego kodu do WordPressa jest użycie WPCode. Jest to najlepsza wtyczka do fragmentów kodu, która pozwala dodawać własne CSS, PHP, HTML i inne.

Ponieważ nie edytujesz bezpośrednio plików motywu, możesz uniknąć wielu typowych błędów WordPress. Możesz także zaktualizować swój motyw lub przełączyć się na zupełnie inny motyw bez utraty własnego kodu.

Przypięte menu można również włączać i wyłączać jednym kliknięciem.

Najpierw należy zainstalować i włączać darmową wtyczkę WPCode. Więcej informacji na ten temat można znaleźć w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki przejdź do strony Code Snippets ” + Add Snippet, gdzie zobaczysz wszystkie gotowe fragmenty kodu WPCode, które możesz dodać do swojej witryny.

Obejmują one fragment kodu, który pozwala całkowicie wyłączyć komentarze, przesyłać rodzaje plików, których WordPress zwykle nie pomaga technicznie, wyłączyć strony załączników i wiele więcej.

Tutaj wystarczy najechać kursorem myszy na „Add Your Custom Code (New Snippet)” i kliknąć przycisk „Use snippet”, gdy się pojawi.

Adding a custom code snippet to a website using WPCode

Na następnym ekranie należy wpisać tytuł fragmentu kodu. To jest tylko dla twojego odniesienia, więc możesz użyć czegokolwiek chcesz.

Następnie otwórz menu rozwijane „Rodzaj kodu” i wybierz „Fragment kodu CSS”.

Creating a sticky navigation menu using WPCode

Po wykonaniu tej czynności dodaj poniższy fragment kodu do edytora kodu WPCode:

#site-navigation {
    background:#00000;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}

Spowoduje to utworzenie menu nawigacyjnego z czarnym tłem. Możesz użyć dowolnego koloru, zmieniając kod szesnastkowy obok tła.

Na przykład użycie tła: #ffffff da białe tło menu. Jeśli nie masz pewności, jakiego kodu szesnastkowego użyć, możesz skorzystać z zasób takich jak Kod koloru HTML.

Musisz również zastąpić #site-navigation identyfikatorem CSS twojego menu nawigacyjnego. Aby znaleźć ten kod, wystarczy wykonać ten sam proces opisany powyżej.

Gdy będziesz zadowolony z kodu, kliknij przełącznik „Nieaktywny”, aby zmienił się na „Aktywny”, a następnie kliknij przycisk „Zapisz fragment kodu”.

how to make a sticky navigation menu using WPCode

Teraz, jeśli odwiedzisz swój blog lub witrynę WordPress, zobaczysz lepkie pływające menu nawigacyjne w działaniu.

W zależności od twojego motywu, czasami menu nawigacyjne może pojawić się poniżej nagłówka witryny zamiast nad nim. W takim przypadku przypięte menu nawigacyjne może pojawić się zbyt blisko tytułu witryny i nagłówka lub nawet na nie nachodzić.

The sticky navigation menu is slightly overlapping the site title

Jeśli tak się stanie, możesz dodać następujące elementy do własnego fragmentu kodu CSS:

.site-branding {
margin-top:60px !important;
}

Wystarczy zastąpić witrynę klasą CSS twojego obszaru nagłówka. Aby uzyskać te informacje, po prostu użyj narzędzia „Inspect” w twojej przeglądarce, a następnie wykonaj ten sam proces opisany w Metodzie 2.

Bonus: Przypięty wpis na twoim WordPressie

Jeśli posiadasz bloga WordPress, to dobrym pomysłem jest, aby niektóre posty na blogu były przyklejane. Mogą to być artykuły filarowe, które zawierają najważniejsze treści w witrynie lub ogłoszenia i posty z rozdaniami, z którymi chcesz, aby użytkownicy wchodzili w interakcje.

Gdy ustawisz wybrany przez siebie wpis jako przypięty, pozostanie on na górze strony twojego bloga, nawet gdy opublikujesz nowe treści, które będą wyświetlane pod wpisem przypiętym.

Sticky post preview

Możesz łatwo przypiąć swój wpis na blogu, otwierając go w edytorze treści. Gdy to zrobisz, po prostu rozwiń kartę „Podsumowanie” w panelu bloków i zaznacz opcję „Przyklej na górze bloga”.

Następnie kliknij przycisk „Aktualizuj” lub „Opublikuj” u góry, aby zapisać twoje ustawienia. W ten sposób udało ci się utworzyć przypięty wpis na twoim blogu w witrynie WordPress.

Check the Sticky Post option

Aby uzyskać więcej informacji, zapoznaj się z naszym poradnikiem na temat tworzenia przypiętych wpisów w WordPressie.

Mamy nadzieję, że ten artykuł pomógł ci dodać lepkie pływające menu nawigacyjne do twojej witryny WordPress. Możesz również zapoznać się z naszym przewodnikiem dla początkujących na temat dodawania menu panelu slajdów w motywach WordPress i naszym poradnikiem na temat dodawania ikon mediów społecznościowych do menu WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

48 komentarzyZostaw odpowiedź

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dennis Muthomi

    is there a way to make sticky menu only apply to certain posts/pages? Like for examlpe, having it non-sticky on my blog’s homepage but sticky everywhere else on the website?

    • WPBeginner Support

      If your theme does not offer that option then we would recommend the plugin for a simple method to have that conditional display :)

      Administrator

  3. Mrteesurez

    Well crafted, I am happy to see the plugin you shared here „sticky menu or (anything) on scroll”. That’s means it can be used to make sticky any elements apart from menu.
    Initially I used raw code for it, thanks for share this easy method.

  4. Jiří Vaněk

    Thanks for the tutorial. I’ve always been looking for usually a template that can basically do this. According to this guide, I no longer have to.

    • WPBeginner Support

      Glad we could help open up your theme options :)

      Administrator

  5. Paul

    Where do i leave the 5 Stars…..thank-you very much!!

    • WPBeginner Support

      Glad our guide was helpful :)

      Administrator

  6. Jess

    Thank you so so much for this helpful post!!! So clear and easy to follow.

    • WPBeginner Support

      Glad our guide was helpful :)

      Administrator

  7. Ivaylo

    Great practical tutorail. I did Method 2 and it worked instantly, however when I open the website on mobile, the buttons from the menu have vanished. Anyone knows why or how to solve it?

    Cheers!

    • WPBeginner Support

      If you haven’t done so already, we would recommend checking with the support for your specific theme to see if it could be a conflict with your theme’s CSS

      Administrator

  8. Serena Richardson

    Hello,
    How do you create a sticky floating menu down the right hand side of a page rather than at the top, so it moves down as you scroll down.
    Thanks!
    Serena

  9. Tom Browne

    Worked instantly. Thank you

    • WPBeginner Support

      You’re welcome :)

      Administrator

  10. simran

    level of perfection and the way of present the information …thanks you..

    • WPBeginner Support

      Glad our guide was helpful :)

      Administrator

  11. Theo

    Where do I find out the id of my navbar?
    Can’t find it.

  12. Natasha T

    A lifesaver, can’t thank you enough.

    • WPBeginner Support

      You’re welcome :)

      Administrator

  13. Tam

    Hello!
    Thanks for your help! It worked like magic :D.
    I learn a little CSS and tried to make my nav sticky from a free theme (GeneratePress) but didn’t work. (I tried „position: sticky;” in CSS), but thank your code that helped me to fix it :)

    • WPBeginner Support

      Glad our article was helpful :)

      Administrator

  14. alexandre

    Just what I was looking for! Great plugin.Thank’s

    • WPBeginner Support

      You’re welcome, glad you found our recommendation helpful :)

      Administrator

  15. Guy Bailey

    Many thanks for your help – just a small q; the background of my menu is transparent when scrolling down. Any quick fixes of tricks to add a solid colour behind it (white in our case)?

  16. Manish

    Thank You. When Wpbeginner writes a blog post on a topic, it is bound to be helpful.

    • WPBeginner Support

      Glad our content has been helpful :)

      Administrator

  17. Everest

    Thanks so much.
    You made my day.

    • WPBeginner Support

      You’re welcome, glad we could help :)

      Administrator

  18. Tony Chung

    The CSS code worked and I did have to add a margin to the header so the whole title would display. My menu bar stretches across the top but the menu buttons start at the left and stop in the middle. How do I move the buttons to be centered on the page?

  19. Chinedu

    Wow, This works perfectly.

    Thank you

    • WPBeginner Support

      Glad our solution worked for you :)

      Administrator

  20. Gillian Davies

    I have a list of books in a table. I have imported the images of their front covers into Media, now I want to have the images pop up as a viewer scrolls down the list. Similar to a row hover, but how do I do this in a table created in table maker?

  21. Raul

    How can i make this fixed navigation menu scrollable?
    So i used it for a sidebar but when the sidebar it is too long it doesn’t fit on the screen and i cant scroll it down.

  22. Rushikesh Thawale

    Hello,
    How did you write the code LIKE A CODE in this post? I mean how to show HTML codes like this in a post?
    Thanks.

  23. Cesar

    Great post! your CSS code works for me :D

  24. dani

    :( I wasn’t even able to find that CSS code …. I even searched for „nav id” and there is nothing like that in the code! Any idea why?

  25. amin

    Also you can „z-index: 999xxxx” for logo or any element that you want put it on navbar

  26. Sujith Reghu

    I want to know how to add a sticky menu inside a WordPress post or page. Like for a long post, the headings and sub-headings of the post itself to be presented in the sticky menu so that a reader can easily navigate from one section in the post to another. Thanks…

  27. Zac

    thanks for the tutorial!

    what i need is a little different, i need a 'mini-menu’ to appear when you hover on the menu … so it doesn’t show until you hover .. like a drop down

    if you could make this tutorial i would appreciate it.

    • amin

      you can use a mega-menu plugin or uber menu plugin, but you can make it without plugin, by css or jquery, like bootstrap3 menu

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.