Navigeringsmenyn högst upp på en webbplats innehåller vanligtvis länkar till alla de viktigaste sidorna. När du gör denna meny klistrig kan du behålla den på skärmen medan användaren skrollar ner på sidan. På så sätt är den alltid inom räckhåll.
Detta gör navigeringen mer tillgänglig, vilket gör att användare snabbt kan hoppa till olika delar av din webbplats utan att behöva skrolla tillbaka till toppen. Enligt vår mening kan användningen av en klistrig meny bidra till att öka engagemanget och förbättra den övergripande användbarheten på webbplatsen.
I den här artikeln visar vi hur du enkelt lägger till en "sticky" flytande navigeringsmeny på din WordPress-webbplats.
Vad är en klistrig flytande navigeringsmeny?
En klistrig eller flytande navigeringsmeny ‘fastnar’ högst upp på skärmen när en användare skrollar ner, så den är synlig hela tiden.
Vanligtvis innehåller den översta navigeringsmenyn i WordPress länkar till din webbplats viktigaste innehåll. Genom att göra denna meny klistrig kan besökare klicka på dessa länkar när som helst utan att behöva scrolla.
Om du driver en webbutik, har den övre navigeringsmenyn vanligtvis länkar till sidor som är utformade för att konvertera, som kassan och kundvagnen. Genom att göra den övre menyn klibbig kan du ofta minska antalet övergivna kundvagnar och få fler försäljningar.
Med det sagt, låt oss se hur du enkelt kan skapa en fast flytande navigeringsmeny i vilket WordPress-tema eller WooCommerce-butik som helst. Använd bara snabblänkarna nedan för att hoppa till den metod du vill använda:
- Metod 1: Lägg till en klibbig meny med dina temainställningar (enkelt)
- Metod 2: Lägg till din "sticky" navigeringsmeny med ett plugin (rekommenderas)
- Metod 3: Lägg till en fast flytande navigeringsmeny med kod
- Bonus: Gör dina WordPress-inlägg "sticky"
Metod 1: Lägg till en klibbig meny med dina temainställningar (enkelt)
Några av de bästa WordPress-teman har inbyggt stöd för klistriga navigeringsmenyer. Med det sagt är det värt att kontrollera dina temainställningar genom att gå till Teman » Anpassa i WordPress-instrumentpanelen och leta efter inställningar som kallas 'Menyer'.
Om du är osäker på om ditt tema stöder "sticky"-menyer kan du kontrollera temats dokumentation eller till och med kontakta utvecklaren för hjälp. För mer information, se vår guide om hur man korrekt ber om WordPress-support och får den.
Om ditt tema inte har inbyggt stöd för klistriga menyer, då behöver du använda en av de andra metoderna nedan.
Metod 2: Lägg till din "sticky" navigeringsmeny med ett plugin (rekommenderas)
Det enklaste sättet att lägga till en klistrig navigeringsmeny i WordPress är att använda pluginet Sticky Menu & Sticky Header. Det låter dig göra vad som helst klistrigt, inklusive menyer.
Först måste du installera och aktivera pluginet. Om du behöver hjälp, se vår nybörjarguide om hur man installerar ett WordPress-plugin.
Efter aktivering, gå till Inställningar » Sticky Menu (eller vad som helst!).
För att börja behöver du hämta CSS-ID:t för navigeringsmenyn som du vill göra klistrig genom att använda din webbläsares inspektionsverktyg.
Besök helt enkelt din webbplats och för muspekaren över navigeringsmenyn. Högerklicka sedan och välj 'Inspektera' från webbläsarens meny.
Detta öppnar en ny panel i webbläsaren där du kan se källkoden för navigeringsmenyn.
Du måste hitta kodraden som relaterar till menyn eller din webbplats sidhuvud. Den kommer att se ut ungefär så här:
<nav id="site-navigation" class="main-navigation" role="navigation">
Om du har svårt att hitta koden, för muspekaren över de olika kodraderna i 'Inspektera'-panelen. När du hittar rätt kod kommer webbläsaren att markera navigeringsmenyn, som du kan se i följande bild.
I det här fallet är navigeringsmenyns CSS-ID site-navigation.
När du har denna information, byt tillbaka till din WordPress-instrumentpanel och lägg till den i fältet 'Sticky Element (Required)'.
Du måste också lägga till ett hash-tecken (#) i början, så site-navigation blir #site-navigation.
Klicka sedan på knappen 'Spara ändringar' längst ner på sidan för att spara dina ändringar.
Nu, om du besöker din WordPress-webbplats och scrollar, bör menyn stanna högst upp.
Ibland kan "sticky"-menyn överlappa innehåll som du inte vill dölja.
Om detta inträffar måste du definiera ett utrymme mellan toppen av din skärm och den fasta navigeringsmenyn genom att skriva ett nummer i fältet 'Utrymme mellan toppen av sidan och det fasta elementet'.
Klistriga menyer kan orsaka problem för enheter med mindre skärmar, som mobila enheter. Med det i åtanke är det en bra idé att kontrollera mobilversionen av din WordPress-webbplats från din dator.
Om du inte är nöjd med hur menyn ser ut kan du 'lossna' den för mobilanvändare genom att hitta följande fält: 'Fäst inte element när skärmen är mindre än.'
Skriv in '780px' här.
Det finns några fler inställningar att utforska, men detta är allt du behöver för att skapa en fungerande klistrig navigeringsmeny.
När du är nöjd med hur navigeringsmenyn är inställd, klicka på ‘Spara ändringar’ för att lagra dina inställningar.
Metod 3: Lägg till en fast flytande navigeringsmeny med kod
Du kan också skapa en klistrig navigeringsmeny med CSS.
Det bästa sättet att lägga till anpassad kod i WordPress är att använda WPCode. det är det bästa pluginet för kodutdrag som låter dig lägga till anpassad CSS, PHP, HTML och mer.
Eftersom du inte redigerar temafiler direkt, kan du undvika många vanliga WordPress-fel. Du kan också uppdatera ditt tema eller byta till ett helt annat tema utan att förlora din anpassade kod.
Du kan också slå på och av den fasta menyn med ett enda klick.
Först måste du installera och aktivera det kostnadsfria WPCode-pluginet. Mer information finns i vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
När pluginet är aktiverat, gå till Code Snippets » + Add Snippet-sidan, där du kommer att se alla färdiga WPCode-snuttar du kan lägga till på din webbplats.
Dessa inkluderar ett utdrag som låter dig inaktivera kommentarer helt, ladda upp filtyper som WordPress normalt inte stöder, inaktivera bilagesidor, och mycket mer.
Här, för muspekaren över 'Lägg till din anpassade kod (nytt utdrag)' och klicka på knappen 'Använd utdrag' när den visas.
På nästa skärm behöver du skriva in en titel för kodavsnittet. Detta är bara för din referens, så du kan använda vad du vill.
Öppna sedan rullgardinsmenyn 'Kodtyp' och välj 'CSS-utdrag'.
När det är gjort, lägg till följande kodavsnitt i WPCode-kodredigeraren:
#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;
}
Detta skapar en navigeringsmeny med en svart bakgrund. Du kan använda vilken färg du vill genom att ändra hexkoden bredvid background.
Till exempel, att använda background: #ffffff ger dig en vit bakgrundsfärg på menyn. Om du är osäker på vilken hexkod du ska använda, kan du titta på en resurs som HTML color code.
Du måste också ersätta #site-navigation med CSS-ID:t för din navigeringsmeny. För att hitta den här koden, följ bara samma process som beskrivs ovan.
När du är nöjd med koden, klicka på växlingsknappen 'Inaktiv' så att den ändras till 'Aktiv', och klicka sedan på knappen 'Spara kodavsnitt'.
Nu, om du besöker din WordPress-blogg eller webbplats, kommer du att se den "sticky" flytande navigeringsmenyn i aktion.
Beroende på ditt tema kan navigeringsmenyn ibland visas under webbplatsens sidhuvud istället för ovanför det. I det här fallet kan den "sticky" navigeringsmenyn visas för nära webbplatsens titel och sidhuvud eller till och med överlappa det.
Om detta händer kan du lägga till följande i ditt anpassade CSS-utdrag:
.site-branding {
margin-top:60px !important;
}
Ersätt bara site-branding med CSS-klassen för ditt sidhuvud. För att få denna information, använd helt enkelt webbläsarens 'Inspektera'-verktyg och följ sedan samma process som beskrivs i Metod 2.
Bonus: Gör dina WordPress-inlägg "sticky"
Om du har en WordPress-blogg är det en bra idé att göra några av dina blogginlägg klistriga. Det kan vara pelarartiklar som innehåller det viktigaste innehållet på din webbplats eller meddelanden och utlottningsinlägg som du vill att användarna ska interagera med.
När du gör ett inlägg som du väljer till klistrat, kommer det att förbli överst på din bloggsida även när du publicerar nytt innehåll, som kommer att visas under det klistrade inlägget.
Du kan enkelt göra ditt blogginlägg klistrat genom att öppna det i innehållsredigeraren. När du har gjort det, expanderar du helt enkelt fliken ‘Sammanfattning’ i blockpanelen och markerar alternativet ‘Klistra fast överst på bloggen’.
Klicka sedan på knappen ‘Uppdatera’ eller ‘Publicera’ högst upp för att lagra dina inställningar. Du har nu framgångsrikt skapat ett klistrigt blogginlägg på din WordPress-webbplats.
För mer information, se vår handledning om hur man gör klistriga inlägg i WordPress.
Vi hoppas att den här artikeln hjälpte dig att lägga till en klistrig flytande navigeringsmeny på din WordPress-webbplats. Du kanske också vill se vår nybörjarguide om hur man lägger till en skjutpanelmeny i WordPress-teman och vår handledning om hur man lägger till ikoner för sociala medier i WordPress-menyn.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Dennis Muthomi
finns det ett sätt att göra en "sticky" meny som bara gäller för vissa inlägg/sidor? Som till exempel att den inte är "sticky" på min blogs startsida men "sticky" överallt annars på webbplatsen?
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
Admin
Mrteesurez
Välgjord, jag är glad att se pluginet du delade här "sticky menu or (anything) on scroll". Det betyder att det kan användas för att göra alla element klistriga förutom menyn.
Ursprungligen använde jag rå kod för det, tack för att du delade denna enkla metod.
Dayo Olobayo
Jag håller med Mrteesurez, klistriga menyer är en värdefull webbplatsfunktion. Förutom att skapa en klistrig meny kan du också överväga att införliva en “mjuk skrollningseffekt” för att ytterligare förbättra användarupplevelsen när du navigerar mellan sektioner på din webbsida.
Jiří Vaněk
Tack för handledningen. Jag har alltid letat efter en mall som i princip kan göra detta. Enligt den här guiden behöver jag inte det längre.
WPBeginner Support
Glad we could help open up your theme options
Admin
Paul
Var lämnar jag 5 stjärnorna…..tack så mycket!!
WPBeginner Support
Glad our guide was helpful
Admin
Jess
Tack så jättemycket för detta hjälpsamma inlägg!!! Så tydligt och lätt att följa.
WPBeginner Support
Glad our guide was helpful
Admin
Ivaylo
Bra praktisk handledning. Jag använde Metod 2 och det fungerade omedelbart, men när jag öppnar webbplatsen på mobilen har knapparna i menyn försvunnit. Vet någon varför eller hur man löser det?
Skål!
WPBeginner Support
Om du inte redan har gjort det, rekommenderar vi att du kontrollerar med supporten för ditt specifika tema för att se om det kan vara en konflikt med ditt temas CSS.
Admin
Serena Richardson
Hej,
Hur skapar man en "sticky" flytande meny längst ner till höger på en sida istället för högst upp, så att den följer med när man scrollar ner.
Tack!
Serena
WPBeginner Support
Det skulle vara att lägga till en klistrig widget som vi har en rekommendation i vår artikel nedan:
https://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-widget-in-wordpress/
Admin
Tom Browne
Fungerade direkt. Tack
WPBeginner Support
You’re welcome
Admin
simran
nivå av perfektion och sättet att presentera informationen … tack..
WPBeginner Support
Glad our guide was helpful
Admin
Theo
Var hittar jag id:t för min navigeringsmeny?
Hittar det inte.
WPBeginner Support
För att göra det skulle du använda 'inspektera element'. Vi har en guide om hur du korrekt använder 'inspektera element' nedan:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site
Admin
Natasha T
En livräddare, kan inte tacka er nog.
WPBeginner Support
You’re welcome
Admin
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
Admin
alexandre
Precis vad jag letade efter! Bra plugin. Tack
WPBeginner Support
You’re welcome, glad you found our recommendation helpful
Admin
Guy Bailey
Tack så mycket för din hjälp – bara en liten fråga; bakgrunden på min meny är transparent när man scrollar ner. Finns det några snabba lösningar eller knep för att lägga till en solid färg bakom den (vit i vårt fall)?
WPBeginner Support
Det skulle bero på hur din meny är inställd, men du kan använda inspektera element för att hitta objektet som du kan ställa in bakgrundsfärgsegenskapen till: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Manish
Tack. När Wpbeginner skriver ett blogginlägg om ett ämne, är det garanterat att vara hjälpsamt.
WPBeginner Support
Glad our content has been helpful
Admin
Everest
Tack så mycket.
Du gjorde min dag.
WPBeginner Support
You’re welcome, glad we could help
Admin
Tony Chung
CSS-koden fungerade och jag var tvungen att lägga till en marginal till sidhuvudet så att hela titeln skulle visas. Min menyrad sträcker sig över toppen men menyknapparna börjar till vänster och slutar i mitten. Hur flyttar jag knapparna så att de centreras på sidan?
WPBeginner Support
Det skulle variera från tema till tema, men du skulle normalt behöva ändra CSS. Du kan testa ändringar med hjälp av "inspect element": https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Chinedu
Wow, det här fungerar perfekt.
Tack
WPBeginner Support
Glad our solution worked for you
Admin
Gillian Davies
Jag har en lista med böcker i en tabell. Jag har importerat bilderna av deras omslag till Media, nu vill jag att bilderna ska dyka upp när en tittare scrollar ner i listan. Liknande en rad-hover, men hur gör jag detta i en tabell skapad i tabelltillverkaren?
Raul
Hur kan jag göra den här fasta navigeringsmenyn scrollbar?
Så jag använde den för en sidopanel, men när sidopanelen är för lång passar den inte på skärmen och jag kan inte scrolla ner den.
Rushikesh Thawale
Hej,
Hur skrev du koden SOM EN KOD i det här inlägget? Jag menar hur man visar HTML-koder som den här i ett inlägg?
Tack.
Tara
Du har förmodligen redan upptäckt det, men för dem som söker, hur man visar sin kod i sitt inlägg använder man HTML-tecknet för den öppnande hakparentesen i HTML-taggarna < ; utan mellanslag.
WPBeginner Support
Det är en metod men för detta använder vi den andra metoden i vår artikel här: https://www.wpbeginner.com/wp-tutorials/how-to-easily-display-code-on-your-wordpress-site/
Admin
Cesar
Great post! your CSS code works for me
dani
Alain
Mycket användbart!
tack.
amin
Du kan också använda “z-index: 999xxxx” för logotypen eller vilket element som helst som du vill placera i navigeringsfältet
Sujith Reghu
Jag vill veta hur man lägger till en klistrig meny inuti ett WordPress-inlägg eller en sida. Som för ett långt inlägg, att rubrikerna och underrubrikerna i själva inlägget presenteras i den klistriga menyn så att en läsare enkelt kan navigera från en sektion i inlägget till en annan. Tack...
Zac
tack för handledningen!
vad jag behöver är lite annorlunda, jag behöver en 'minimeny' som dyker upp när man hovrar över menyn ... så den inte visas förrän man hovrar ... som en rullgardinsmeny
om du kunde göra den här handledningen skulle jag uppskatta det.
amin
du kan använda ett mega-meny-plugin eller ett uber-meny-plugin, men du kan göra det utan plugin, med css eller jquery, som bootstrap3-menyn