Så här skapar du en sticky flytande navigation menu i WordPress

Vill du skapa en sticky flytande navigation menu i WordPress?

Den högst upp navigation menu har vanligtvis links till all your viktigaste pages. Genom att göra menyn sticky kan du hålla kvar den på vyn när användaren rullar ner på sidan, så att den alltid finns inom räckhåll.

I den här artikeln visar vi hur du enkelt kan add to en sticky flytande navigation menu till din WordPress website.

Vad är en sticky flytande navigation menu?

En sticky eller flytande navigation menu ”klistrar” sig högst upp på vyn när användaren rullar nedåt, så att den finns på skärmen hela tiden.

Den övre navigation menyn i WordPress innehåller vanligtvis links till din websites viktigaste content. Genom att göra denna meny sticky kan besökarna klicka på dessa links när som helst utan att behöva rulla.

Om du run en onlinebutik, så har den översta navigation menyn vanligtvis links till pages som är designade för att konvertera, såsom kassasidan och kundvagnen. Genom att göra menyn högst upp sticky kan you ofta minska antalet övergivna cart och få mer försäljning.

Med detta sagt, låt oss se hur du enkelt kan skapa en sticky flytande navigation menu i alla WordPress teman eller WooCommerce store. Använd bara snabblänkarna under för att hoppa till den metod du vill använda:

Metod 1: Add a Sticky Menu med hjälp av dina Theme Settings (Easy)

Några av de bästa teman för WordPress har built-in support för sticky menus för navigation. Med detta sagt är det värt att kontrollera dina temainställningar genom att gå till Themes ” Customize i WordPress dashboard och leta efter eventuella inställningar märkta ”Menus”.

Om du inte är säker på om ditt theme har support för sticky menus kan du kontrollera temats documentation eller kontakta utvecklaren för att få hjälp. För mer information, vänligen se vår guide om hur du på rätt sätt ber om support för WordPress och får det.

Om your theme inte har built-in support för sticky menus, måste du använda någon av de andra metoderna under.

Metod 2: Add to din sticky navigation menu med hjälp av ett plugin (rekommenderas)

Det enklaste sättet att add to en sticky navigation menu i WordPress är att använda pluginet Sticky Menu & Sticky Header. Det allow you att göra vad som helst sticky, inklusive menyer.

Först måste du installera och aktivera pluginet. Om du behöver hjälp kan du vänligen läsa vår guide för nybörjare om hur du installerar ett plugin för WordPress.

Efter aktivering, gå till Settings ” Sticky Menu (eller vad som helst!).

Till att börja med måste du få CSS ID:n för den navigation menu som du vill göra sticky genom att använda webbläsarens inspektionsverktyg.

Besök helt enkelt din website och hovera musen över navigation menu. Därefter högerklickar du och väljer ”Inspektera” i webbläsarens meny.

Detta öppnar en new panel i webbläsaren, där du kan se källkoden för navigation menu.

Du måste hitta kodraden som är relaterad till menyn eller din site header. Det 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 kan du hovera med musen över de olika kodraderna i panelen ”Inspect”. Webbläsaren kommer att markera navigation menu när du hittar rätt kod, som du kan se i följande image.

I det här fallet är navigation menu’s CSS ID site-navigation.

När du har den här informationen går du tillbaka till din WordPress dashboard och addar den till fältet ”Sticky Element (obligatorisk)”.

Du måste också add to ett hash-tecken (#) i början, så site-navigation blir #site-navigation.

Därefter klickar du på knappen ”Save Changes” längst ner på sidan för att lagra dina ändringar.

Om du nu besöker din WordPress website och rullar, ska menyn vara högst upp.

Ibland kan den sticky menyn överlappa något content som du inte vill dölja.

Om detta händer måste du definiera ett utrymme mellan toppen av din vy och den sticky navigation menu genom att skriva in en siffra i fältet ”Space between top of page and sticky element”.

Sticky menyer kan orsaka problem för enheter med mindre vyer, t.ex. mobila enheter. Med detta i åtanke är det en bra idé att kontrollera mobilversionen av din website i WordPress från din dator.

Om du inte är nöjd med hur menyn ser ut kan du ”klistra upp” den för mobila användare genom att hitta följande fält: ”Klistra inte upp elementet när vyn är mindre än.

Här skriver du in ”780px”.

Det finns fler Settings att utforska, men det här är all information du behöver för att skapa en fungerande sticky navigation menu.

När du är nöjd med hur navigation menu är inställd, click on ”Save Changes” to store your settings.

Metod 3: Lägg till en sticky flytande navigation meny med kod

Du kan också skapa en sticky navigation menu med hjälp av CSS.

Det bästa sättet att lägga till anpassad kod till WordPress är genom att använda WPCode. det är det bästa code snippets plugin som tillåter dig att lägga till custom CSS, PHP, HTML, och mer.

Eftersom du ej editar temafilerna direkt kan du undvika många vanliga error i WordPress. Du kan också updating ditt theme eller byta till ett helt annat theme utan att förlora din custom code.

Du kan också toggle den sticky menyn på och av med ett enda click.

Först måste du installera och aktivera det gratis WPCode-pluginet. För mer information, se vår steg-för-steg guide om hur du installerar ett WordPress plugin.

När pluginet är aktiverat, gå till Code Snippets ” + Add Sn ippet page där du kommer att se alla färdiga WPCode snippets du kan lägga till på din site.

Dessa inkluderar ett snippet som tillåter dig att helt inaktivera kommentarer, uploada filtyper som WordPress vanligtvis inte stöder, inaktivera bilagssidor och mycket mer.

Här håller du bara muspekaren över ”Add Your Custom Code (New Snippet)” och klickar på knappen ”Use snippet” när den visas.

På nästa vy måste du skriva in en titel för code snippet. Detta är bara för din referens, så du kan använda vad du vill.

Öppna sedan dropdown för ”Code Type” och välj ”CSS Snippet”.

När det är gjort, add följande snippet till WPCode code editor:

#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 kommer att skapa en navigation menu med svart bakgrund. Du kan använda vilken färg du vill genom att ändra hex-koden bredvid bakgrundsfärgen.

Om du till exempel använder bakgrund: #ffffff får du en vit bakgrund till menyn. Om du ej är säker på vilken hex-kod du ska använda kan du klura på en resource som HTML color code.

Du måste också ersätta #site-navigation med CSS ID:n för din navigation menu. För att hitta denna kod följer du helt enkelt samma process som beskrivs ovan.

När du är nöjd med koden klickar du på toggeln ”Inaktiverad” så att den ändras till ”Aktiv” och klickar sedan på knappen ”Save Snippet”.

Om du nu besöker din WordPress blogg eller website kommer du att se den sticky flytande navigation menu i action.

Beroende på ditt theme kan navigations menyn ibland visas under site header istället för ovanför den. I det här fallet kan den sticky navigationsmenyn visas för close till site title och header eller till och med överlappa den.

Om detta händer kan du add to följande till ditt customize CSS snippet:

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

Ersätt bara site-branding med CSS-klassen för ditt header area. För att få denna information använder du helt enkelt webbläsarens verktyg ”Inspektera” och följer sedan samma process som beskrivs i Behandlas 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 sticky. Det kan vara artiklar som innehåller det viktigaste innehållet på din site eller postar med meddelanden och giveaways som du vill att användarna ska interagera med.

När du gör ett valfritt inlägg sticky kommer det att ligga kvar högst upp på din blogginlägg även när du publicerar nytt content, som kommer att visas under det sticky inlägget.

Du kan enkelt göra ditt blogginlägg (fast)klistrat inlägg genom att öppna det i content editor. När du har gjort det förstorar du bara tabben ”Summary” i panelen Block och kontrollerar alternativet ”Stick to the top of the blogg”.

Därefter klickar du högst upp på knappen ”Update” eller ”Publicera” för att spara dina settings. Nu har du utan problem skapat ett (fast)klistrat inlägg på din WordPress site.

Mer detaljer finns i vår tutorial om hur man skapar (fast)klistrade inlägg i WordPress.

Vi hoppas att den här artikeln hjälpte dig att add to en sticky flytande navigation menu till din WordPress site. You may also want to see our beginner’s guide on how to increase your blog traffic and our comparison of the best WordPress page builders plugins.

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.