Hur man stylar WordPress navigationsmenyer (Updated)

Vill du utforma navigation menu på din website i WordPress?

En väl stylad menu kan göra stor skillnad. Den kan förbättra helhetsintrycket av din site, göra det lättare för besökarna att hitta det de letar efter och till och med uppmuntra dem att clicka vidare till vissa pages.

Här på WPBeginner har vi sett allsköns kreativa sätt att utforma menyer, så vi vill dela med oss av vad som fungerar bäst i olika situationer.

I den här artikeln visar vi dig hur du kan utforma din navigation menu i WordPress på 5 olika sätt.

Varför styla din navigation menu i WordPress?

Din navigation menu i WordPress är färdplanen för din website och guidar besökare till de viktigaste pages. Den visas högst upp på de flesta webbplatser, vilket gör den till en utmärkt plats för att fånga uppmärksamhet och påverka hur användare utforskar ditt content.

Styling av din navigation menu handlar om mer än att bara få den att se snygg ut. Det kan avsevärt förbättra upplevelsen för användarna av din website och i sin tur öka sökmotorsoptimeringen (Search Engine Optimization, SEO).

Om din navigation menu är svårläst kan besökarna ha svårt att hitta det de letar efter och känna sig frustrerade. Å andra sidan kan en clear och visuellt tilltalande menu uppmuntra dem att clicka sig vidare till olika sections och spendera mer tid på din site.

På så sätt kan du öka antalet sidvisningar på din site och minska avvisningsfrekvensen.

I den här guiden beskrivs olika metoder för styling av din navigation menu, beroende på ditt WordPress theme och din bekvämlighetsnivå. Du kan använda snabblänkarna under för att navigera genom denna tutorial och hitta den metod som fungerar bäst för dig:

Metod 1: Customize din navigationsmeny med Full-Site Editor (Block Themes)

Om du använder ett Block Editor-tema och vill utforma din navigation menu med hjälp av Full-Site Editor är det här metoden för dig.

Först, heada över till din WordPress dashboard och navigera till Appearance ” Editor.

Här ser du alternativ för att customize olika delar av ditt block theme.

Gå vidare och klicka på ”Navigation”.

På nästa page, click the pencil ’Edit’ icon.

Detta öppnar block editor.

När du är i block editor, click on the ”Page List” block that displays your WordPress website’s pages as menu options.

Sedan klickar du på ”Edit”.

Nu visas ett popup-fönster som talar om att du nu kan edit blocket Page List. You can edit, remove, reorder, and add new menu items to the block.

Klicka på ”Edit” för att fortsätta.

Block Editor för navigation menyn fungerar gillar när du redigerar en page eller post. Känn dig fri att add to andra menyelement som customizers, en call-to-action knapp, ett sökformulär, en logga och mycket mer.

Om du gillar en djupdykning i hantering av menyer med Full Site Editor, kontrollera avsnittet om hur du redigerar din navigation menu i vår Full Site Editing guide. I det avsnittet beskrivs också hur du skapar undermenyer.

Låt oss nu komma till stylingen. Klicka på valfritt block för att komma igång.

Beroende på blocket kan toolbaren erbjuda vissa alternativ för customize. Om du till exempel väljer en Page Link kan du fetstila, kursivera, genomstryka och ändra ordningen på den om det behövs.

Du kan använda dessa tools för att lyfta fram vissa menu items från de övriga.

I panelen med inställningar till höger växlar du till fliken ”Block” och under den navigerar du till fliken ”Styles”.

Här kan du customize färg, typografi, dimensioner, kanter och skuggor för ditt block.

Block tenderar att ha standardinställningar för Styles. Om du till exempel redigerar en Page Link kanske du bara ser alternativ som ”Font Size” och ”Width”.

Men oroa dig inte för det. Klicka bara på menyn med tre punkter bredvid dessa alternativ för att aktivera fler customize-möjligheter, som att ändra fontfamilj och bokstavsavstånd.

På samma sätt, om du har ett block med knappar i din navigation menu, kan du klicka på det för att visa alternativ för att customize dess stil, text, bakgrundsfärg, typografi, dimensioner, kant och till och med skugga.

Du kan läsa vår guide om hur du lägger till en call-to-action knapp för mer information.

Om du vill ändra bakgrundsfärgen på din navigation menu, måste du göra det genom att editera temats header template.

För att öppna den, klicka bara på kommandot search fält högst upp som säger ”Navigation. Skriv sedan in ”Header” och tryck på din Enter-tangent.

Öppna nu List View och select Group.

Denna grupp består av din headers site title och navigation menu.

Öppna sedan tabben ”Styles” i blockets sidebar och klicka på ”Background” i sektionen ”Color”.

Efter det är det bara att välja en bakgrundsfärg för din header template.

När du är nöjd med stilen på din navigation menu klickar du bara på knappen ”Save” och din nya menu och header kommer att visas på din WordPress blogg eller site.

Så här gillar vi vår navigation menu på vår demo site:

Tänk på att de stilval du kommer att ha beror på ditt specifika temas övergripande alternativ för styling.

Om du vill customize ditt temas globala styles måste du clicka på knappen ”Styles” högst upp till höger.

Härifrån kan du ändra typografi, färger och layout för hela webben.

För mer information, kontrollera sektionen om hur du ändrar din websites globala stilar i Full Site Editing guide.

Metod 2: Customize din navigationsmeny med Theme Customizer (Classic Themes)

Den här metoden är för användare med klassiska WordPress themes som vill utforma sin navigation menu med hjälp av den built-in Theme Customize.

Gillar med den föregående metoden, vi kommer att fokusera på styling av menyens appearance snarare än att hantera meny-items själva.

Om du gillar att lära dig hur du skapar menyer och hanterar dem i klassiska themes, kontrollera vår guide om att lägga till en navigation menu i WordPress. Den täcker att skapa menyer med Customize, tilldela dem till olika menu locations, och lägga till menyer som widgets.

För att använda Theme Customize, heada över till din WordPress dashboard och navigera till Appearance ” Customize.

Här ser du alternativ för att customize olika aspekter av ditt tema, vilket beror på vilket tema du använder. I de flesta fall har WordPress themes ett alternativ för ”Menus”, men utvecklare från tredje part kan också add to andra inställningar.

Till exempel har temat Astra en dedikerad Header Builder för menu customize. Se till att konsultera ditt temas documentation för att se om de add to speciella menu settings.

Om ditt theme inte har sådana alternativ för customize, oroa dig inte. Vi kan enkelt styla menyn med hjälp av custom CSS.

Först klickar du på ”Menus” section.

På nästa page, click the gear ”Settings” and then select ”CSS Classes”.

Detta aktiverar dig att tilldela en unik CSS-klass till varje menu item, vilket aktiverar dig att utforma dem individuellt senare.

Därefter rullar du ner panelen.

Öppna sedan din primära menu.

Vad du vill göra nu är att hitta det menu-item som du vill ändra och clicka för att förstora det.

Du kommer att se ett new alternativ för att add to en custom CSS-klass. I exemplet under lägger vi bara till CSS-klassen contact-us till vår Contact Us page.

När du har tilldelat CSS-klasser till dina menu items, headar du tillbaka till main menu i Theme Customizer.

Klicka sedan på ”Ytterligare CSS”.

Här kan du add to custom CSS-kod för att styla din navigation menu.

Låt oss utforska några exempel, och ändra gratis CSS-klasserna och hexfärgkoden:

Ändra bakgrundsfärg för menu-item

Följande code snippet ändrar bakgrundsfärgen för menu-item med CSS-klassen contact-us till en grön (#E3FFA8) och addar rundade hörn (border-radius: 5px):

.contact-us {
  background-color: #E3FFA8;
  border-radius: 5px;
}

Ändra färgen på standard Menu Link

Detta code snippet ändrar färgen på alla menylänkar i den primära menylistan(#primary-menu-li a) till röd (#ff0000):

.primary-menu li a {
    color: #ff0000; 
}

Obs/observera att CSS-klassen för ditt temas primära menu kan se annorlunda ut än vår.

För att se vad ditt temas CSS-klass primära meny är kan du använda inspektionsverktyget runt ditt navigation menu area.

Leta sedan efter en HTML-kod som säger ”menu” eller ”navigation-menu”. Det bör finnas en CSS-klass som definierar den bredvid den.

Add hovering-effekter till menu items

Detta code snippet riktar in sig på alla menu items i den primära menu-item listan(#primary-menu li) och add to en hovering effekt:

.primary-menu li a:hover {
  background-color: #a6e4a5;
	color: #666;
	border-radius: 5px;
	}

När en användare hoverar över menu-item ändras bakgrundsfärgen till ljusgrönt (#a6e4a5), textfärgen ändras till mörkgrått (#666) och rundade hörn läggs till (border-radius: 5px).

Skapa transparenta menyer för navigation i WordPress

Detta CSS code snippet kan göra din navigation menu transparent:

#site-navigation { 
background-color:transparent; 
}

Med den här effekten smälter den in i bakgrundsbilden och ger din website en ren och modern känsla.

För mer inspiration kan du kontrollera dessa användbara tutorials:

• Så här addar du den första och sista CSS-klassen till menu items i WordPress
• Så här markerar du ett menu-item i WordPress

Kom ihåg att det här bara är några exempel för att få you igång. Om du gillar att använda samma metoder men inte kan hitta avsnittet Additional CSS, kontrollera vår guide om hur du fixar problemet med att det saknas tema customizer.

Metod 3: Customize din navigation meny med en page builder plugin (rekommenderas)

Den här metoden är perfekt för dig som vill ha mer control över utseendet på din navigation menu, men som ändå föredrar en nybörjarvänlig upplevelse. Det är också ett bra alternativ om du fortfarande är i ett tidigt skede av att bygga din website och inte har lanserat den ännu.

Ett page builder plugin allow you att visuellt designa din website’s layout med drag and drop-funktionalitet utan att behöva skriva någon kod. Detta gör det idealiskt för kompletta Beginnare.

I detta section kommer vi att använda SeedProd som vårt page builder plugin. SeedProd erbjuder ett användarvänligt gränssnitt och innehåller extra block och funktioner för att få din navigation menu att sticka ut.

Step 1: Installera och aktivera SeedProd

Först installerar och aktiverar du SeedProd plugin på din WordPress website. Du kan läsa vår guide om hur du installerar ett WordPress plugin för mer information.

När du är aktiverad, navigera till SeedProd ” Settings från din WordPress dashboard. Sedan enter du din SeedProd license key och clickar på knappen ”Verify key”.

Step-by-Step 2: Välj ett SeedProd Theme Template Kit

Nu, head över till SeedProd ” Theme Builder. Det är här du kan skapa ett custom WordPress theme from scratch.

Klicka på knappen ”Theme Template Kits” för att bläddra igenom ett gallery med fördesignade templates.

För denna tutorial kommer vi att använda Smile Craft Medical Website Theme. Men du är välkommen att välja vilken template som helst som passar ditt företag.

You can preview these theme template kits by clicking the magnifying glass icon to see which one fits your website’s style.

När du har hittat en temamall som du gillar klickar du på den orangea ikonen med bocken för att importera template-delarna.

SeedProd kommer nu att skapa de väsentliga website sections gillar header, footer, homepage, och så vidare. Dessa kan all redigeras visuellt med hjälp av drag and drop-byggaren.

Step-by-Step 3: Customize navigationsmenyn

När temamallen har installerats kommer du tillbaka till sidan Theme Builder.

I en temamall för SeedProd är navigation menu placerad i header template-delen.

För att edit din header template, håll musen över den och click på länken ”Edit Design”. Då öppnas templates i drag and drop editor.

Du kommer nu att se en header section som består av Nav Menu-blocket (som är din navigation menu) och andra block, beroende på temat.

För att edit menyn, click på Nav Menu blocket. I den vänstra sidebaren visas sedan en lista med block lists.

Som standard använder SeedProd menyn ”Simple” för att skapa en meny baserad på den templates du använder. Du kan dock också välja alternativet ”WordPress Menu” för att använda en befintlig meny som du redan har skapat med WordPress standard editor (appearance ” Menus).

Låt oss gå igenom skillnaden mellan de två. Med den enkla metoden kan du lägga till, edit och remove links direkt i page builders gränssnitt.

Om du vill skapa ett nytt menu item klickar du på knappen ”+ Add New Item”.

Här kan du enter textetiketten och länkens URL.

Välj sedan att öppna länken i ett nytt fönster och add to ett nofollow-attribut (om det behövs). Gilla det här:

Du kan också ordna om menu-items genom att clicka på knappen med tre rader bredvid ett item och dra det uppåt eller nedåt.

För att ta bort ett menu item, hoverar du bara över det och clickar på trash iconen bredvid.

Nackdelen med det här alternativet är att you inte kan skapa dropdown-menyer. Det är därför det anropas ”Enkelt”.

Å andra sidan tillåter inte alternativet ”WordPress Menu” att du hanterar menu items direkt från SeedProd Editor. Det måste du göra i Menu Editor.

Den goda nyheten är att om din befintliga meny är en dropdown-meny kan du visa den med den här metoden.

Oavsett vilken metod du väljer kan du customize storleken på fonten och avståndet mellan menu-items, add to en textdelare eller justera inriktningen.

Tabben ”Advanced” erbjuder ännu fler alternativ för customomize.

You can change the list layout from horizontal to vertical, adjust typography, modify text and hover colors, and even add text shadows.

Om du rullar nedåt kan du kontrollera padding och marginaler för skrivbord, surfplattor och mobila enheter.

På så sätt blir din menu lätt att navigera i oavsett storlek på vy.

Vill du få din menu att sticka ut?

SeedProd låter dig add to animationer för en mer engagerande användarupplevelse. För mer information kan du läsa vår Step-by-Step guide om hur du lägger till CSS-animationer i WordPress.

Om du vill add en new call-to-action knapp i din navigation kan du använda SeedProd’s Button block.

Öppna bara Block Finder i den vänstra sidebaren och hitta blocket Button i den vänstra sidebaren.

Dra sedan blocket var som helst till din header.

När du har gjort det är det bara att customize knappens call-to-action, länk, styling och andra inställningar.

Du kan också skapa en sticky menu som stannar högst upp på sidan när användaren rullar ner. På så sätt behöver de inte gå upp varje gång de vill gå till en annan page.

För att göra detta, hoverar du bara över sektionen tills en lila linje visas och klickar sedan på ikonen ”Settings”.

Gå nu till tabben ”Advanced”.

Rulla sedan ner till menyn ”Position”.

Här väljer du ”Sticky”.

Efter det addar du en nolla till förskjutningen högst upp och ett högt z-indexnummer (gillar 999). Detta för att se till att headern alltid visas rakt ovanför page.

När du är nöjd med din customize navigation menu, click the ”Save” button.

Step-by-Step 4: Publicera ditt Custom WordPress Theme

Nu är du redo att använda ditt nya customized WordPress theme. För att aktivera det, gå tillbaka till sidan ”Theme Builder” och toggle på knappen ”Enable SeedProd Theme”.

Allt du behöver göra nu är att view your website och kontrollera din new navigation menu.

Så här gillar vi vår navigation menu på vår demo site:

Metod 4: Customize din navigationsmeny med Visual CSS-redigeraren (mer anpassningsbar)

Den här metoden erbjuder fler alternativ för customize än de built-in WordPress-funktionerna, men den är ej riktigt lika flexibel som att använda ett page builder plugin. Med det sagt är det en bra lösning om du vill göra några design tweaks till din navigation menu utan att helt ersätta ditt theme.

Denna metod är också ett bra alternativ för dem som använder klassiska themes som saknar alternativ för Styling men som inte är bekväma med edit av CSS i metod 2.

Här kommer vi att guida dig genom att använda ett premium WordPress tillägg för visual editor för CSS-redigerare som heter CSS Hero. Det allow you att visuellt designa din website utan att skriva någon kod. Inga kunskaper i HTML eller CSS är obligatoriska.

Först installerar du tillägget CSS Hero i WordPress. Du kan läsa vår guide om hur du installerar ett plugin i WordPress för mer information.

När du har aktiverat pluginet CSS Hero kommer du att se en new knapp som heter ”CSS Hero” i admin-verktygsfältet i WordPress. Klicka på knappen för att starta den visuella editorn.

CSS Hero använder ett WYSIWYG-gränssnitt. När du klickar på knappen öppnas din website tillsammans med CSS Hero-fönstret på vänster sida av vyn.

För att edit din navigation menu, kan du flytta musen över den. CSS Hero kommer då att markera den med en kant. Click on the highlighted area to start customize the menu (klicka på det markerade området för att börja customize menyn).

Med CSS Hero kan du editera olika aspekter av containern till din navigation menu, inklusive bakgrund, typografi, kanter, avstånd, listor och till och med extra effekter.

Låt oss till exempel säga att du vill ändra bakgrundsfärgen. Om du klickar på ”Background” öppnas ett användarvänligt gränssnitt där du kan välja en new färg, gradient eller image.

När du gör ändringar kommer du att se dem live i website preview till höger.

Eller så kan du add a box shadow till dina menu items för att göra dem mer iögonfallande.

För att göra detta, navigera till tabben ”Extra”.

Klicka sedan på ”Make Shadow”.

Här kommer du att kunna edit skugga inställningar.

Nu kan du bara leka lite med hur skuggan gillar att se ut.

Dra gratis runt skuggans orientering, kvalitet på oskärpa och spridning samt position.

Du kan ändra vad du vill med CSS Heros gränssnitt, så du kan experimentera för att hitta det som fungerar bäst för din site.

När du är nöjd med din customize meny, click the ”Save” button to store your modifications.

Du kan läsa dessa guider för att lära dig mer om vad du kan göra med CSS Hero:

• Så här ändrar du storleken på din WordPress logga (fungerar med alla teman)
• Så här add to Image Hovering Effects i WordPress (Steg för Steg)

Metod 5: Customize din navigationsmeny med kod (avancerad)

Den här metoden är mer lämplig för användare som är bekväma med kod. Den allow också you att bygga en customize menu om your theme inte innehåller en som standard.

Attlägga till custom code snippets kan verka skrämmande till en början, eftersom det innebär att temafiler som functions.php och header.php måste editeras. Det finns dock sätt att göra det enklare.

Vi rekommenderar att du använder ett tillägg som heter WPCode. Det ger ett säkert och användarvänligt sätt att add to custom code till din WordPress site utan att ändrades core-filer.

Vår guide om hur du lägger till en custom navigation menu i WordPress teman kan gå igenom stegen för att skapa en meny med WPCode.

När du har skapat menyn kan du utforska dessa tutorials.

• Så här addar du image icons till navigationsmenyer i WordPress
• Så här addar du en knapp till din WordPress Header Menu
• Så här skapar du en sticky flytande navigation menu i WordPress

Var och en innehåller en metod för att customize menyn med hjälp av WPCode.

Ultimata guider för att Customize WordPress Navigation Menu

Nu när du har utforskat grunderna i styling av din navigationsmeny i WordPress, här är några fler guider som du kan läsa för att ta din meny till nästa nivå:

• Så här lägger du till en megameny på din site i WordPress. Mega menus allow you to include subcategories, vilket ger ett användarvänligt sätt att organisera omfattande website content.
• Hur man skapar en mobilanpassad responsiv WordPress meny. Den här guiden går igenom hur du skapar en responsiv meny som anpassar sig till olika storlekar på vyer.
• Så här addar du en responsiv meny i fullskärm i WordPress. Denna tutorial kommer att lära you hur man implementerar en fullskärmsmeny som förstoras över hela skärmen när den aktiveras, vilket ger en djärv navigation menu.
• Så här lägger du till en Slide Panel Menu i WordPress Themes. Slide panel menus är en utrymmesbesparande lösning som döljer huvudnavigeringen tills en användare sveper eller klickar på en knapp för att avslöja den.
• Så här skapar du en vertikal navigation menu i WordPress. Vertikala navigationsmenyer kan vara ett bra sätt att visa upp ett stort antal menu items på en sidebar eller annat vertikalt utrymme på din website.
• Så här add to Social Media Icons till WordPress Menyer. Integrera social media icons direkt i din navigation menu för att göra det enkelt för besökare att ansluta till you.
• Så här skapar du en minimerbar menu i sidebar i WordPress. Har du många pages? Gör det lättare för användare att navigera på din website genom att lägga till en minimerbar meny i sidebaren.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du stylar WordPress menyer för navigation. Du kanske också vill kontrollera vårt expertval av de bästa tilläggen för Contact Form i WordPress och vår guide för nybörjare till att skapa en custom page i 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.