Czy chcesz utworzyć przypięte pływające menu nawigacyjne w WordPress?
Górne menu nawigacyjne zazwyczaj zawiera odnośniki do wszystkich twoich najważniejszych stron. Dzięki przypiętemu menu, może ono pozostać na ekranie, gdy użytkownik przewija stronę w dół, dzięki czemu jest zawsze w zasięgu ręki.
W tym artykule pokażemy, jak łatwo dodać przypięte pływające menu nawigacyjne do twojej witryny internetowej 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.
Jeśli prowadzisz sklep internetowy, górne menu nawigacyjne zazwyczaj zawiera odnośniki do stron zaprojektowanych z myślą o konwersji, takich jak strona kasy i koszyk klienta. Dzięki przypiętemu górnemu menu można 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!).
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 przejść na twoją witrynę internetową i najechać kursorem myszy na menu nawigacyjne. Następnie wystarczy kliknąć prawym przyciskiem myszy i wybrać „Inspect” z menu przeglądarki.
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”. Przeglądarka podświetli menu nawigacyjne po znalezieniu właściwego kodu, jak widać na poniższym obrazku.
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.
Następnie kliknij przycisk „Zapisz zmiany” u dołu strony, aby zapisać twoje zmiany.
Teraz, jeśli przejdziesz na swoją witrynę internetową WordPress i przewiniesz ją, menu powinno pozostać na górze.
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ą częścią twojego ekranu a przypiętym menu nawigacyjnym, wpisując rodzaj liczby w polu „Odstęp między górną częścią strony a przypiętym elementem”.
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”.
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 włączaniu 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.
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”.
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”.
Teraz, jeśli przejdziesz na twój blog lub witrynę internetową WordPress, zobaczysz przypięte 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ć.
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, dobrym pomysłem jest przypięcie niektórych wpisów na twoim blogu. Mogą to być artykuły filarowe, które zawierają najważniejsze treści twojej witryny lub ogłoszenia i wpisy z rozdaniami, z którymi chcesz, aby importerzy 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.
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.
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ć przypięte pływające menu nawigacyjne do twojej witryny WordPress. Możesz również zapoznać się z naszym przewodnikiem dla początkujących, jak zwiększyć ruch na blogu i naszym porównaniem najlepszych wtyczek do tworzenia stron 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.
Syed Balkhi says
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!
Dennis Muthomi says
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 says
If your theme does not offer that option then we would recommend the plugin for a simple method to have that conditional display
Administrator
Mrteesurez says
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.
Jiří Vaněk says
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 says
Glad we could help open up your theme options
Administrator
Paul says
Where do i leave the 5 Stars…..thank-you very much!!
WPBeginner Support says
Glad our guide was helpful
Administrator
Jess says
Thank you so so much for this helpful post!!! So clear and easy to follow.
WPBeginner Support says
Glad our guide was helpful
Administrator
Ivaylo says
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 says
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
Serena Richardson says
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
WPBeginner Support says
That would be adding a sticky widget which we have a recommendation in our article below:
https://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-widget-in-wordpress/
Administrator
Tom Browne says
Worked instantly. Thank you
WPBeginner Support says
You’re welcome
Administrator
simran says
level of perfection and the way of present the information …thanks you..
WPBeginner Support says
Glad our guide was helpful
Administrator
Theo says
Where do I find out the id of my navbar?
Can’t find it.
WPBeginner Support says
To do that you would use inspect element. We have a guide on how to properly use inspect element below:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site
Administrator
Natasha T says
A lifesaver, can’t thank you enough.
WPBeginner Support says
You’re welcome
Administrator
Tam says
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 says
Glad our article was helpful
Administrator
alexandre says
Just what I was looking for! Great plugin.Thank’s
WPBeginner Support says
You’re welcome, glad you found our recommendation helpful
Administrator
Guy Bailey says
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)?
WPBeginner Support says
It would depend on how your menu is set up but you can use inspect element to find the object that you can set the background-color property to: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrator
Manish says
Thank You. When Wpbeginner writes a blog post on a topic, it is bound to be helpful.
WPBeginner Support says
Glad our content has been helpful
Administrator
Everest says
Thanks so much.
You made my day.
WPBeginner Support says
You’re welcome, glad we could help
Administrator
Tony Chung says
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?
WPBeginner Support says
That would vary from theme to theme the specifics, but you would normally need to modify the CSS. You can test changes using inspect element: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrator
Chinedu says
Wow, This works perfectly.
Thank you
WPBeginner Support says
Glad our solution worked for you
Administrator
Gillian Davies says
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?
Raul says
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.
Rushikesh Thawale says
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.
Tara says
You’ve probably found out by now, but for those searching, how to show your code on your post use the html character for the opening bracket on the html tags < ; without the space.
WPBeginner Support says
That is one method but for this, we’re using the second method in our article here: https://www.wpbeginner.com/wp-tutorials/how-to-easily-display-code-on-your-wordpress-site/
Administrator
Cesar says
Great post! your CSS code works for me
dani says
Alain says
Very usefull !
thank you.
amin says
Also you can „z-index: 999xxxx” for logo or any element that you want put it on navbar
Sujith Reghu says
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…
Zac says
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 says
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