En välstylad meny kan göra stor skillnad. Den kan förbättra webbplatsens övergripande utseende, göra det lättare för besökare att hitta det de letar efter och till och med uppmuntra dem att klicka på vissa sidor.
Här på WPBeginner har vi sett alla möjliga kreativa sätt att styla menyer. Vi har också experimenterat med vår egen styling av navigeringsmenyer flera gånger genom åren. Därför vill vi dela med oss av vad som fungerar bäst för olika situationer.
I den här artikeln visar vi dig hur du stylar din WordPress-navigeringsmeny på 5 olika sätt.
Varför styla din WordPress-navigeringsmeny?
Din WordPress navigeringsmeny är webbplatsens färdplan och guidar besökare till de viktigaste sidorna. Den visas högst upp på de flesta webbplatser, vilket gör den till en utmärkt plats att fånga uppmärksamhet och påverka hur användare utforskar ditt innehåll.
Att styla din navigeringsmeny går utöver att bara göra den snygg. Det kan avsevärt förbättra din webbplats användarupplevelse och i sin tur öka din sökmotoroptimering (SEO).
Om din meny är svår att använda kan besökare ha svårt att hitta det de letar efter och lämna webbplatsen frustrerade. Å andra sidan kan en tydlig och visuellt tilltalande meny uppmuntra dem att klicka sig vidare till olika sektioner och spendera mer tid på din webbplats.
Som ett resultat kan du öka din webbplats sidvisningar och minska dess avvisningsfrekvens.
Den här guiden kommer att bryta ner olika metoder för att styla din navigeringsmeny, beroende på ditt WordPress-tema och din komfortnivå. Du kan använda snabblänkarna nedan för att navigera genom den här handledningen och hitta den metod som fungerar bäst för dig:
- Metod 1: Anpassa din navigeringsmeny med Full-Site Editor (Blockteman)
- Metod 2: Anpassa din navigeringsmeny med Temainställningar (Klassiska teman)
- Metod 3: Anpassa din navigeringsmeny med ett sidbyggarplugin (rekommenderas)
- Metod 4: Anpassa din navigeringsmeny med visuell CSS-redigerare (mer anpassningsbar)
- Method 5: Customize Your Navigation Menu With Code (Advanced)
Metod 1: Anpassa din navigeringsmeny med Full-Site Editor (Blockteman)
Om du använder ett blocktema och vill styla din webbplats navigeringsmeny med Full-Site Editor, är detta metoden för dig.
Gå först till din WordPress-instrumentpanel och navigera till Utseende » Redigerare.
Här ser du alternativ för att anpassa olika delar av ditt blocktema.
Klicka på 'Navigation'.
På nästa sida klickar du på pennikonen för att 'Redigera'.
Detta öppnar blockredigeraren, där du kan redigera ditt navigeringsblock.
När du är i blockredigeraren klickar du på blocket 'Sidlista' som visar sidorna på din WordPress-webbplats som navigeringsmenyalternativ.
Klicka sedan på ’Redigera’.
Ett popup-fönster kommer nu att visas och tala om att du nu kan redigera blocket "Sidlista". Du kan redigera, ta bort, ordna om och lägga till nya menyalternativ i blocket.
Klicka på 'Redigera' för att fortsätta.
Blockredigeraren för navigeringsmenyn fungerar som när du redigerar en sida eller ett inlägg. Lägg gärna till andra menyalternativ som anpassade länkar, en knapp för uppmaning till handling, ett sökformulär, en webbplatslogotyp och mycket mer.
Om du vill dyka djupare in i att hantera menyer med Full-Site Editor, kolla in avsnittet om hur du redigerar din navigeringsmeny i vår guide om Full-Site Editing. Det avsnittet handlar också om att skapa undermenyer.
Nu går vi vidare till stylingen. Klicka på valfritt block för att börja.
Beroende på blocket kan verktygsfältet erbjuda vissa anpassningsalternativ. Om du till exempel väljer en sidlänk kan du göra den fet, kursiv, genomstruken och ordna om den vid behov.
Du kan använda dessa verktyg för att markera ett enskilt menyalternativ från resten.
I inställningspanelen till höger, byt till fliken 'Block' och under den, navigera till fliken 'Stilar'.
Här kan du anpassa färgen, typografin, dimensionerna, kanterna och skuggorna på ditt block.
Block tenderar att ha standardinställningar för Stilar. Om du till exempel redigerar en Sidlänk kanske du bara ser alternativ som 'Teckenstorlek' och 'Bredd'.
Men oroa dig inte. Klicka bara på menyn med tre punkter bredvid dessa alternativ för att aktivera fler anpassningsmöjligheter, som att ändra teckensnittsfamilj och bokstavsavstånd.
Likaså, om du har ett Knapp-block i din navigeringsmeny, kommer att klicka på det att visa alternativ för att anpassa dess stil, text, bakgrundsfärg, typografi, dimensioner, kantlinje och till och med skugga.
Du kan läsa vår guide om hur man lägger till en knapp för uppmaning till handling för mer information.
Om du vill ändra bakgrundsfärgen på din navigeringsmeny, måste du göra det genom att redigera din temas sidhuvudsmall.
För att öppna den, klicka bara på kommandosökningsfältet högst upp som säger 'Navigation'. Skriv sedan in 'Header' och tryck på din Enter-tangent.
Öppna nu Listvyn och välj Grupp.
Den här gruppen består av din headers webbplatstitel och navigeringsmeny.
Öppna sedan fliken 'Styles' i sidofältet för Blockinställningar och klicka på 'Background' i avsnittet Color.
Välj därefter en bakgrundsfärg för din header-mall.
När du är nöjd med din navigeringsmenys stil, klickar du helt enkelt på knappen 'Spara', så kommer din nya meny och ditt sidhuvud att vara live på din WordPress-blogg eller webbplats.
Här är hur vår navigeringsmeny ser ut på vår demosida:
Tänk på att stilvalen du har beror på ditt specifika temas övergripande stilalternativ.
Om du vill anpassa ditt temas globala stilar måste du klicka på knappen 'Stilar' längst upp till höger.
Härifrån kan du ändra typografi, färger och layout för hela webbplatsen.
Notera: Kom ihåg att ändringarna du gör här påverkar inte bara din navigeringsmeny utan även andra delar av ditt tema.
För mer information, kolla in avsnittet om hur du ändrar din webbplats globala stilar i guiden Full-Site Editing.
Metod 2: Anpassa din navigeringsmeny med Temainställningar (Klassiska teman)
Den här metoden är för användare med klassiska WordPress-teman som vill styla sin navigeringsmeny med hjälp av den inbyggda Temanpassaren.
Like with the previous method, we’ll focus on styling the menu’s appearance rather than managing the menu items themselves.
Om du vill lära dig hur du skapar menyer och hanterar dem i klassiska teman, kolla in vår guide om att lägga till en navigeringsmeny i WordPress. Den täcker skapande av menyer med anpassaren, tilldelning av dem till olika menyplatser och läggande till menyer som widgets.
För att använda Tema anpassaren, gå till din WordPress-instrumentpanel och navigera till Utseende » Anpassa. Klicka sedan på knappen 'Anpassa' bredvid ditt aktiva tema.
Här ser du alternativ för att anpassa olika aspekter av ditt tema, vilket beror på vilket tema du använder. I de flesta fall har WordPress-teman ett alternativ för 'Menyer', men tredjepartsutvecklare kan lägga till andra inställningar också.
Till exempel har temat Sydney en dedikerad Header Builder för menyanpassning. Se till att konsultera ditt temas dokumentation för att se om de lägger till speciella menyinställningar.
If your theme doesn’t have such customization options, don’t worry. We can easily style the menu using custom CSS.
Klicka först på avsnittet 'Menyer'.
På nästa sida, klicka på kugghjulsikonen 'Inställningar' och välj sedan 'CSS-klasser'.
Detta gör att du kan tilldela en unik CSS-klass till varje menyalternativ, vilket gör att du kan styla dem individuellt senare.
Rulla sedan ner i panelen.
Öppna sedan din primära meny.
Det du vill göra nu är att hitta menyalternativet du vill ändra och klicka för att expandera det.
Du kommer att se ett nytt alternativ för att lägga till en anpassad CSS-klass. I exemplet nedan lägger vi bara till CSS-klassen contact-us till vår Kontaktossida.
När du har tilldelat CSS-klasser till dina menyalternativ, gå tillbaka till huvudmenyn i Temaanpassaren.
Klicka sedan på 'Ytterligare CSS'.
Här kan du lägga till anpassad CSS-kod för att styla din navigeringsmeny.
Låt oss utforska några exempel, och ändra gärna CSS-klasserna och hexfärgkoden:
Ändra bakgrundsfärgen på menyalternativet
Följande kodavsnitt ändrar bakgrundsfärgen på menyalternativet med CSS-klassen contact-us till en grön (#E3FFA8) och lägger till rundade hörn (border-radius: 5px):
.contact-us {
background-color: #E3FFA8;
border-radius: 5px;
}
Change Default Menu Link Color
Detta kodavsnitt ändrar färgen på alla meny-länkar inom den primära menylistan (#primary-menu-li a) till rött (#ff0000):
.primary-menu li a {
color: #ff0000;
}
Notera att CSS-klassen för ditt temas primära meny kan se annorlunda ut än vår.
För att se vad din temas primära CSS-klassmeny är kan du använda inspektionselementet runt ditt navigeringsmenyområde.
Leta sedan efter en HTML-kod som säger 'menu' eller 'navigation-menu'. Det bör finnas en CSS-klass som definierar den bredvid.
Lägg till hovereffekter till menyalternativ
Detta kodavsnitt riktar sig till alla menyalternativ inom den primära menylistan (#primary-menu li) och lägger till en hover-effekt:
.primary-menu li a:hover {
background-color: #a6e4a5;
color: #666;
border-radius: 5px;
}
När en användare hovrar över menyalternativet ä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 navigeringsmenyer i WordPress
Detta CSS-kodavsnitt kan göra din navigeringsmeny transparent:
#site-navigation {
background-color:transparent;
}
Att använda denna effekt kommer att smälta samman den med bakgrundsbilden för att ge din webbplats en ren, modern känsla.
För mer inspiration kan du kolla in våra guider nedan:
- Hur man lägger till den första och sista CSS-klassen till WordPress-menyobjekt
- Hur man markerar ett menyalternativ i WordPress
Kom ihåg att detta bara är några exempel för att komma igång. Om du vill använda samma metoder men inte kan hitta sektionen Ytterligare CSS, kolla in vår guide om hur du åtgärdar problemet med den saknade temaanpassaren.
Metod 3: Anpassa din navigeringsmeny med ett sidbyggarplugin (rekommenderas)
Den här metoden är perfekt för dem som vill ha mer kontroll över utseendet på sin navigeringsmeny men ändå föredrar en nybörjarvänlig upplevelse. Det är också ett utmärkt alternativ om du fortfarande är i de tidiga stadierna av att bygga din webbplats och ännu inte har lanserat den.
Ett sidbyggarplugin låter dig visuellt designa din webbplatslayout med dra-och-släpp-funktionalitet utan att behöva skriva någon kod. Detta gör det idealiskt för helt nybörjare.
I det här avsnittet kommer vi att använda SeedProd som vår sidbyggarplugin. SeedProd erbjuder ett användarvänligt gränssnitt och inkluderar extra block och funktioner för att få din navigeringsmeny att sticka ut.
Notera: Vi kommer att använda SeedProd Pro, eftersom temabyggarfunktionen endast är tillgänglig i Pro-versionen. Du kan dock gärna använda gratisversionen för att utforska hur SeedProd är.
Steg 1: Installera och aktivera SeedProd
Installera och aktivera först SeedProd-pluginet på din WordPress-webbplats. Du kan läsa vår guide om hur man installerar ett WordPress-plugin för mer information.
När den har aktiverats, navigera till SeedProd » Inställningar från din WordPress-instrumentpanel. Ange sedan din SeedProd-licensnyckel och klicka på knappen 'Verifiera nyckel'.
Steg 2: Välj en SeedProd-mallpaket
Gå nu till SeedProd » Temabyggare. Det är här du kan skapa ett anpassat WordPress-tema från grunden.
Klicka på knappen ’Temamallkit’ för att bläddra igenom ett galleri med fördesignade mallar.
För den här handledningen kommer vi att använda Smile Craft Medical Website Theme. Du kan dock välja vilken mall som helst som passar din verksamhet.
Du kan förhandsgranska dessa temamallpaket genom att klicka på förstoringsglaset för att se vilket som passar din webbplats stil.
När du har hittat en temamall du gillar, klicka på den orangea bockikonen för att importera mallens delar.
SeedProd kommer nu att skapa de nödvändiga webbplatssektionerna som header, sidfot, startsida och så vidare. Dessa kan alla redigeras visuellt med dra-och-släpp-byggaren.
Steg 3: Anpassa menyns design
När temamallen har installerats kommer du tillbaka till sidan Temabyggare.
I en SeedProd-temamall finns navigeringsmenyn i sidhuvudsmallens del.
För att redigera din sidhuvudmall, hovra helt enkelt musen över den och klicka på länken 'Redigera design'. Detta öppnar mallen i dra-och-släpp-redigeraren.
Du kommer nu att se en sidhuvudssektion som består av Nav Menu-blocket (vilket är din navigeringsmeny) och andra block, beroende på temat.
För att redigera menyn, klicka på Nav Menu-blocket. Sidofältet till vänster visar då en lista med blockinställningar.
Som standard använder SeedProd den 'Enkla' menyn för att skapa en meny baserad på mallpaketet du använder. Du kan dock också välja alternativet 'WordPress-meny' för att använda en befintlig meny som du redan har skapat med hjälp av standard WordPress-menyredigeraren (Utseende » Menyer).
Låt oss bryta ner skillnaden mellan de två. Enkla metoden låter dig lägga till, redigera och ta bort länkar direkt i sidbyggargränssnittet.
För att skapa ett nytt menyobjekt, klicka på knappen '+ Lägg till nytt objekt'.
Här kan du ange textetiketten och länken.
Välj sedan att öppna länken i ett nytt fönster och lägg till ett nofollow-attribut (om det behövs). Som detta:
Du kan också ordna om menyalternativen genom att klicka på knappen med tre linjer bredvid ett alternativ och dra det upp eller ner.
För att ta bort ett menyobjekt, hovra helt enkelt över det och klicka på papperskorgsikonen bredvid det.
Nackdelen med det här alternativet är att du inte kan skapa rullgardinsmenyer. Det är därför den kallas 'Enkel'.
Å andra sidan tillåter alternativet 'WordPress-meny' dig inte att hantera menyalternativ direkt från SeedProd-redigeraren. Du måste göra det i menyredigeraren.
Goda nyheter är att om din befintliga meny är en rullgardinsmeny kan du visa den med den här metoden.
Oavsett vilken metod du väljer kan du anpassa teckenstorleken och avståndet mellan menyalternativen, lägga till en textavdelare eller justera justeringen.
Fliken 'Avancerat' erbjuder ännu fler anpassningsalternativ.
Du kan ändra listlayouten från horisontell till vertikal, justera typografi, ändra text- och hoverfärger och till och med lägga till textskuggor.
Om du skrollar ner kan du styra utfyllnad och marginaler för stationära datorer, surfplattor och mobila enheter.
På så sätt är din meny lätt att navigera på alla skärmstorlekar.
Vill du att din meny ska sticka ut?
SeedProd låter dig lägga till animationer för en mer engagerande användarupplevelse. Du kan läsa vår steg-för-steg-guide om hur man lägger till CSS-animationer i WordPress för mer information.
Om du vill lägga till en ny call-to-action-knapp i din navigeringsfält kan du använda SeedProds knappblock.
Öppna bara blockfinnaren i sidofältet till vänster och hitta knappblocket i sidofältet till vänster.
Dra sedan blocket var som helst i ditt sidhuvud.
När du är klar, anpassa helt enkelt knappens uppmaning till handling, länk, stil och andra inställningar.
Du kan också skapa en "sticky" meny som stannar högst upp på sidan när användaren scrollar ner. På så sätt behöver de inte gå upp varje gång de vill gå till en annan sida.
För att göra detta, för muspekaren över sektionen tills en lila linje visas, klicka sedan på kugghjulsikonen ‘Inställningar’.
Växla nu till fliken ‘Avancerat’.
Rulla sedan ner till menyn 'Position'.
Välj här 'Klibbig'.
Lägg sedan till en nolla till toppförskjutningen och ett högt z-index-nummer (som 999). Detta är för att säkerställa att sidhuvudet alltid visas precis ovanför sidan.
När du är nöjd med din anpassade navigeringsmeny, klicka på knappen 'Spara'.
Steg 4: Publicera ditt anpassade WordPress-tema
I det här skedet är du redo att använda ditt nya anpassade WordPress-tema. För att aktivera det, gå tillbaka till sidan 'Temabyggare' och aktivera knappen 'Aktivera SeedProd-tema'.
Allt du behöver göra nu är att visa din webbplats och kolla in din nya anpassade navigeringsmeny.
Här är hur vår navigeringsmeny ser ut på vår demosida:
Metod 4: Anpassa din navigeringsmeny med visuell CSS-redigerare (mer anpassningsbar)
Den här metoden erbjuder fler anpassningsalternativ än de inbyggda WordPress-funktionerna, men den är inte riktigt lika flexibel som att använda ett sidbyggarplugin. Med det sagt är det en utmärkt lösning om du vill göra några designjusteringar av din navigeringsmeny utan att helt ersätta ditt tema.
Den här metoden är också ett bra alternativ för dem som använder klassiska teman som saknar stylingalternativ men som inte är bekväma med CSS-redigeringen i metod 2.
Här guidar vi dig genom att använda ett premium WordPress visuellt CSS-redigeringsplugin som heter CSS Hero. Det låter dig visuellt designa din webbplats utan att skriva någon kod. Ingen HTML- eller CSS-kunskap krävs.
Notera: Kolla in vår recension av CSS Hero för att lära dig mer om dess funktioner. WPBeginner-användare kan också spara upp till 34% på CSS Hero med vår exklusiva kupongkod.
Installera först CSS Hero-pluginet i WordPress. Du kan läsa vår guide om hur man installerar ett WordPress-plugin för mer information.
När du har aktiverat CSS Hero-pluginet ser du en ny knapp som heter 'CSS Hero' i din WordPress adminverktygsfält. Klicka på den här knappen för att starta den visuella redigeraren.
CSS Hero använder ett WYSIWYG-gränssnitt. Att klicka på knappen öppnar din webbplats tillsammans med CSS Hero-panelen på vänster sida av skärmen.
För att redigera din navigeringsmeny kan du föra musen över den. CSS Hero kommer då att markera den med en ram. Klicka på det markerade området för att börja anpassa menyn.
CSS Hero låter dig redigera olika aspekter av din navigeringsmenybehållare, inklusive bakgrund, typografi, kantlinjer, avstånd, listor och till och med extra effekter.
Låt oss till exempel säga att du vill ändra bakgrundsfärgen på menyn. Om du klickar på 'Bakgrund' öppnas ett användarvänligt gränssnitt där du kan välja en ny färg, gradient eller bild.
När du gör ändringar ser du dem live i förhandsgranskningen av webbplatsen till höger.
Eller så kan du lägga till en skuggbox till dina menyalternativ för att göra dem mer iögonfallande.
För att göra detta, navigera till fliken 'Extra'.
Klicka sedan på ‘Skapa skugga’.
Här kommer du att kunna redigera skugginställningarna.
Nu kan du bara leka med hur skuggan ser ut.
Dra gärna runt skuggans orientering, oskärpa och spridningskvalitet samt position.
Du kan ändra vad du vill med CSS Heros gränssnitt, så du kan experimentera för att hitta vad som fungerar bäst för din webbplats.
Proffstips: Om du följde stegen i Metod 2 för att lägga till CSS-klasser till dina enskilda menyalternativ, kan du också använda CSS Hero för att rikta in dig på och anpassa dessa specifika menyalternativ för ännu mer detaljerad kontroll över din navigeringsmenys utseende.
Once you’re happy with your customized menu, 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:
- Hur du ändrar storleken på din WordPress-logotyp (fungerar med alla teman)
- Hur man lägger till bildeffekter vid hovring i WordPress (steg för steg)
Metod 5: Anpassa din navigeringsmeny med kod (avancerat)
Den här metoden är mer lämplig för användare som är bekväma med kod. Den låter dig också bygga en anpassad meny om ditt tema inte inkluderar en som standard.
Att lägga till anpassade kodavsnitt kan verka skrämmande till en början, eftersom det innebär att redigera temafiler som functions.php och header.php. Det finns dock sätt att göra det enklare.
Vi rekommenderar att du använder en plugin som heter WPCode. Den erbjuder ett säkert och användarvänligt sätt att lägga till anpassad kod på din WordPress-webbplats utan att ändra kärnfiler.
Vår guide om hur man lägger till en anpassad navigeringsmeny i WordPress-teman kan guida dig genom stegen för att skapa en meny med WPCode.
När du har skapat menyn kan du utforska dessa handledningar.
- Hur man lägger till bildikoner med navigeringsmenyer i WordPress
- Hur man lägger till en knapp i din WordPress-sidhuvudmeny
- Hur man skapar en klistrig flytande navigeringsmeny i WordPress
Var och en inkluderar en metod för att anpassa menyn med WPCode.
Ultimata guider för att anpassa WordPress navigeringsmeny
Nu när du har utforskat grunderna i att styla din WordPress-navigeringsmeny, här är några fler guider du kan läsa för att ta din meny till nästa nivå:
- Hur du lägger till en megameny på din WordPress-webbplats. Megamenyer låter dig inkludera underkategorier, vilket ger ett användarvänligt sätt att organisera omfattande webbplatsinnehåll.
- Hur man skapar en mobilklar responsiv WordPress-meny. Den här guiden guidar dig genom hur du skapar en responsiv meny som anpassar sig till olika skärmstorlekar.
- Hur man lägger till en responsiv helskärmsmeny i WordPress. Den här handledningen lär dig hur du implementerar en helskärmsmeny som expanderar över hela skärmen när den aktiveras, vilket ger en djärv navigeringsupplevelse.
- Hur man lägger till en skjutpanelmeny i WordPress-teman. Skjutpanelmenyer är en platsbesparande lösning som döljer huvudnavigeringen tills en användare sveper eller klickar på en knapp för att visa den.
- Hur man skapar en vertikal navigeringsmeny i WordPress. Vertikala navigeringsmenyer kan vara ett utmärkt sätt att visa ett stort antal menyalternativ i en sidofält eller annat vertikalt utrymme på din webbplats.
- How to Add Social Media Icons to WordPress Menus. Integrate social media icons directly into your navigation menu to make it easy for visitors to connect with you.
- Hur man skapar en utfällbar sidomeny i WordPress. Har du många sidor? Gör det enklare för användare att navigera på din webbplats genom att lägga till en utfällbar meny i din sidopanel.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du stylar WordPress-navigeringsmenyer. Du kanske också vill kolla in vår ultimata guide till WordPress-designelemnt och vår nybörjarguide till att skapa en anpassad sida i WordPress.
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.
Sydney Peason
Alternativet "Meny" har försvunnit under mitt "Utseende"-menyalternativ > finns det något annat sätt att se behållarens CSS för min meny och mina alternativ?
Tack!
WPBeginner Support
OM du använder ett blocktema som inte har menyn Utseende kan du använda Inspektera element för att se CSS-behållarinformationen. Du kan se vår guide nedan om hur du använder Inspektera element:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Kristyna
Hej, jag behöver råd, tack:
Jag har framgångsrikt lagt till CSS för att göra ett av mina menyalternativ annorlunda i färg. Men när jag scrollar ner kommer min fasta primära navigeringsmeny ner med mig, och den ändrade färgen på det ena objektet ändras tillbaka till sitt ursprungliga – Hur behåller jag den nya färgen på det ena objektet även när jag scrollar ner?
Tack!
WPBeginner Support
Your theme may modify the menu when you are scrolling down. If you use inspect element you should be able to select the menu item while scrolled down to add your CSS. We have a guide on using inspect element you can take a look at below:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Venkat Vavilala
Hej,
Jag vill öka textstorleken i menyn. Hur gör jag det?
Om det är standard, hur kan jag då anpassa det?
Visa mig en enkel metod för att öka menyteckensnittets storlek
WPBeginner Support
Det skulle bero på vilken metod från den här artikeln du planerar att använda. Som ett exempel, om du använder CSS-metoden, skulle du använda inspektionselementet på samma sätt som i metod 2:s exempel och modifiera teckenstorleken.
Admin
Budi Santoso
Hello Admin.
How the Orange ribbon navigation menu in this site was made?
Thanks
WPBeginner Support
To understand that you would want to take a look at our guide on using inspect element here: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
maria
hur gjorde du menyn för den här sidan
var du tvungen att redigera temafiler?
tack
WPBeginner Support
Our theme was one we custom created
Admin
Trish
Jag vill skapa en meny på butikssidan på min woo commerce-webbplats, horisontellt, som har alla produktkategorier som säljs. Hur kan jag göra det, tack? Tack alla för er hjälp i förväg.
WPBeginner Support
Om ditt tema har en meny på den platsen kan du skapa en vanlig meny med hjälp av:
https://www.wpbeginner.com/beginners-guide/how-to-add-navigation-menu-in-wordpress-beginners-guide/
Sedan kan du använda villkorsstyrd logik för att bara få den att visas på din butikssida med hjälp av vår artikel här: https://www.wpbeginner.com/plugins/how-to-add-conditional-logic-to-menus-in-wordpress/
Admin
Kushal Sonwane
Även om det var en stor uppgift att utföra, men efter att ha läst den här artikeln är det väldigt enkelt att anpassa navigeringsmenyer.
Tack.
WPBeginner Support
You’re welcome
Admin
Lisa
Jag är väldigt ny på detta och jag skapar en webbplats i WP med temat Oceanwp. Jag har gjort som du föreslog genom att klicka på CCS från menyn. Jag försöker ta bort pilen på min rullgardinsmeny och inget jag försöker fungerar för att ta bort den.
Tackar på förhand för all hjälp.
WPBeginner Support
Hej Lisa,
Du kanske vill kontakta temautvecklarna, de skulle kunna hjälpa dig med det.
Admin
Anirudhya
herr vilken tema du använder. jag startar en wordpress-blogg, jag vill ha en enkel layoutblogg för mitt utbildningsändamål.
WPBeginner Support
Hej Anirudhya,
Vi använder ett anpassat tema skapat specifikt för WPBeginner.
Admin
Bobby
Hej, hur är det med HTML-kod?
Jag vill lägga till en rubrik till de nästlade menyerna. Men jag vet inte var eller hur jag ska placera den.
Daniela
Hej,
Jag skulle vilja ändra utseendet på endast den meny jag har lagt till för min försäljningssida. Jag skulle vilja ändra höjden och lägga till en logotyp.
Jag är ingen expert och jag har provat några saker för att se om något ändras i menyn, men det gör det inte. Detta är vad jag har provat:
#Salespage-menu { background:#2194af; height:40px; }
Kan du hjälpa mig på vägen?
Tack så mycket för din ansträngning!
Eugene
Hej alla,
Jag har ett problem med min navigeringsmeny som jag verkligen skulle vara tacksam för lite hjälp med snälla... Själva huvudmenyn ser perfekt ut, problemet är med undermenyn som fälls ner med ett stort mellanrum på cirka 100 pixlar eller så mellan den och föräldern ovanför.
När jag försöker navigera till undermenyn försvinner den helt enkelt ur sikte.
Jag har provat allt jag kan komma på hittills för att flytta den direkt under föräldramenyn så att den förblir öppen och klickbar, men jag har misslyckats hittills.
Detta är den anpassade CSS som används för Point Theme:
#logo { margin: 0; } .site-branding { padding: 0; }
.post-info {
display: none;
}
#navigation ul li a { min-height: 22px; padding: 5px 10px 5px 10px; }
.post-date { display: none; }
Tack och hälsningar.
WPBeginner Support
Hej Eugene,
Vi är inte säkra på vad som kan orsaka detta problem. Det beror på ditt temas CSS och layout och vilka klasser de har använt. Du kan prova denna anpassade CSS:
.primary-navigation li ul { margin:0px; padding:0px; }1-click Use in WordPress
Admin
Eugene
Jag måste tyvärr säga att det inte fungerade heller...
Tack för att du försökte, det verkar som att ett nytt tema efterfrågas.
Regards.
Amirul Farhan
Hej.
Fungerar pluginet även om temat som köpts har sin egen meny design?
Tack
Rida
om du vill använda bootstrap lägger du helt enkelt till dina egna css-klasser med en enkel kodrad i din header.php
'primary', 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'menu_class' => 'nav navbar-nav pull-right', 'menu_id' => 'primary-menu' ) ); ?>
Dhany
Yeay..ännu en PLUGIN ni delar hur man använder PLUGIN så mycket, inte exakt hur man använder wordpress... bra jobbat
WPBeginner Support
Hej Dhany,
Tack för feedbacken. På WPBeginner är vår målgrupp mestadels nybörjare. De flesta av dem är inte bekanta med CSS, HTML, PHP, etc. Plugins gör det enklare för dem att få saker gjorda utan att förstöra sina webbplatser.
Admin
Andrew
Dude…it says ‘beginner’ in the URL.
Dessutom… de lade ut ett manuellt alternativ halvvägs.
Malin
Hej! Jag behöver desperat hjälp med min meny på webbplatsen som använder Baskerville-temat. Med den senaste uppdateringen har menyn blivit helt galen! Snälla HJÄLP!
Malin
Raymond
Detta hjälpte mig mycket när jag försökte lista ut hur jag skulle få mina stilar från ett bootstrap-tema att fungera i WordPress. Tack
Samseen
Trevligt inlägg här,
Hur kan man dock rikta in sig på ett visst objekt i listan. Jag har faktiskt gjort en lösning för tillfället, men jag vill rikta in mig på det specifika menyalternativet.
Säg till exempel att jag vill ha en annan bakgrundsfärg för menyn för det specifika objektet. Hur kan detta göras?
Marko
Verktyget Inspektera element i Chrome, Firefox.
benjamin
Hello guys am new in coding, please I need real help here I have a WordPress site and my site theme is Baskerville , this theme support only one menu am trying to create navigational menus to my curious pages, please if there is code for doing that please where can I place it ,please I’ll so much appreciate a reply thank you.
Arsh Dznr
jag saknar min css-meny i wordpress men menyernas rullgardinsmenyer visas inte, snälla hjälp mig
thanxxxxxxxx
umanga
lade du till dina skript i function.php korrekt?
Andika Amri
Hej wpbeginner, fina handledningar!
Jag använder vantage-temat, har redan lagt till en anpassad klass i en av mina menyer = ".menu-about", men när jag stylar den i stylesheet.css, så är den inte tillämplig alls, har du några förslag alls?
tack!
shaon
Jag använder temat twenty Twelve. Har redan gjort ändringar i min meny med olika färger. Men jag kan inte flytta positionen för navigeringsmenyn i sidhuvudet, det blir för mycket utrymme längst ner från baslinjen i sidhuvudet. Jag vill att den ska nudda botten av sidhuvudet.
Niveditha
Hej,
Jag har skapat en huvudmeny i sidhuvudet och en sidfotsmeny med hjälp av wordpress codex. Nu sitter mina två menyer vertikalt på min sida. Hur kodar jag dem för horisontella menyer?
Vänligen hjälp till, detta är verkligen brådskande!
TIA
WPBeginner Support
För det behöver du använda CSS. Studera koden i standardteman, det bästa exemplet skulle vara twenty thirteen eller twenty twelve teman.
Admin
Judy
Jag skulle dö för en infografik över vad alla dessa klasser faktiskt modifierar. Som:
.current-page-ancestor
.current-menu-parent
.current_menu_parent
.current-page-parent
.current_page_parent
.current-menu-ancestor
och vad skillnaden är mellan bindestreck/understreck som i .current-menu-parent vs .current_menu_parent
jag ska göra en åt dig om du förklarar den för mig!
tack…
Tarmizi Achmad
tack för informationen…
Yogesh Kumar
Hej, jag vill fråga en mycket viktig sak
Som stapeln som visas på din webbplats navigeringsfält ovan för länken Blogg visar 8 länkar när vi för muspekaren över den... nu visar min webbplats också på samma sätt men jag vill att de ska visas på ett sådant sätt att när jag för muspekaren över den kommer den att visa de 8 länkarna sida vid sida, alltså 4-4... Snälla, jag behöver detta väldigt mycket... snälla svara så snart som möjligt...
Redaktionell personal
Vanligtvis organiseras menyer i oordnade listor ul. När du har undermenyer eller rullgardinsmenyer, så är det en egen oordnad lista inuti ett listelement. Så en exempel CSS-klass som du skulle modifiera skulle vara som:
ul.menu li ul{width: 220px;}
ul.menu li li{float: left; width: 100px;}
Nu skulle detta ställa in varje undermenypost på att ha en exakt bredd och flyta till vänster.
Admin
Jim
Bra artikel, tack.
Jag visste aldrig om den där CSS-klassfunktionen, åtminstone vet jag nu.
Det kommer verkligen att gynna mig.
Tack.
Nilamkumar Patel
This is very helpful. Prior to this, I had understanding that we can’t add custom classes in wordpress from admin and I always used to do it in functions.php, but this is awsome. These people are rockers. And many thanks to Sayed for this helpful post
wiseroner
great tutorial!! but how do i do something as simple as change the font size? what do i enter in to change the font size? thank you!
wpbeginner
@wiseroner Du kan inte bara lägga till font-size i huvudmenyklassen i din css-fil.
wpbeginner
@mriulian Titta i handledningen ovan... klasserna för aktuella sidor är redan definierade...
I sidhuvudskoden måste du definiera menyns container-ID och container-klass... följ artikeln som den säger, så kommer det att fungera.
mriulian
Försöker bara vara tydligare, det här är min kod:
// i funktionssidan
if (function_exists(‘register_nav_menus’)) { register_nav_menus( array( ‘mainNav’ ) ); }
// i sidhuvudssidan
‘main_nav_menu’)); ?>
// i css-filen
.current{ background-color: #0188AA; color: #fff; text-decoration: none; }
Hur applicerar jag den här klassen på min navigering? (väldigt enkelt på en statisk html-sida men tydligen ganska komplicerat i wordpress).
Tack på förhand
mriulian
Det här är vad jag gjorde men det fungerar inte. Jag registrerade min meny på functions-sidan och anropade den sedan från header-sidan som min huvudsakliga navigation. Nu har jag en . current-klass i min stylesheet som ska tillämpas på den aktuella sidan men det är inte uppenbart hur man gör det. Kan du hjälpa med ett förslag?
wpbeginner
Sättet som WordPress navigeringsmenyer fungerar på, kommer den automatiskt att veta vilken sida som är den aktuella..
iirimina
Tack för att du nämnde CSS-klasserna i panelen för skärmalternativ. Problemet jag har med min navigering är hur man stylar navigeringsmenyn så att varje menyalternativ får en specifik bakgrundsfärg när man kommer till en viss sida. Du nämner att skapa en klass som .current_page_item{} i ditt stilark. Men hur applicerar man denna klass i header.php?
Rick
Var kan jag få mer detaljerad information om hur man lägger till ikoner till menyalternativen. Vad är en riktigt bra CSS-guide för att göra många av de saker du beskrivit här?
Tack
Redaktionell personal
CSS-Tricks är ett bra forum, men du bör förmodligen titta på böcker om CSS för nybörjare för att lära dig CSS. Eftersom allt du gör är att lägga till en bakgrundsbild.
Admin
Francisco
Hello. I absolutely loved this post and found it very useful, particularly the option to set individual CSS classes, so many thanks for this information.
What I was wondering is if it would be possible to dynamically assign CSS classes from the php wp_nav_menu function call to certain types of elements, for instance, to parent menu items only. That way, you wouldn’t have to manually add that class in the Menu Screen every time a new type element (in the example, a new parent item) is created.
Any thoughts on that would be greatly appreciated,
Redaktionell personal
Ja, du skulle använda parametern Menu Class för det.
Admin
Francisco
Det var det jag tänkte. Tack för bekräftelsen och för att du hörde av dig.
Skål!
Jayesh
fin artikel.
Jag vill ändra utdata från wp_nav_menu().
Jag gillar inte HTML som genereras av wp_nav_menu().
Jag har min egen fina HTML för menyn jag vill ha.
Så jag ville modifiera HTML-strukturen som genereras av wp_nav_menu().
är detta möjligt ?
Vänligen meddela så snart som möjligt.
Redaktionell personal
Du kan lägga till dina egna div-element etc., men det kommer alltid att vara listutdata. Du kan styla det hur du vill.
Admin
chunky
Thank you! Now I can stop pulling my hair out! Bookmarked this and will tell others!
Kalid
Hej, tack för handledningen. det vore trevligt om du kunde guida mig till att få navigeringsmenyn som används i ditt tema. Jag skulle vilja ha en rullgardinsmeny som din. tack!
Redaktionell personal
WordPress standardnavigeringsmeny låter dig ha rullgardinsmenyer. Dra dem bara lite åt höger från huvudobjektet, så är det möjligt. Om du använder ett ramverk som Genesis har det redan alternativet för snygga rullgardinsmenyer tillgängligt, så du kan helt enkelt välja det. Eller så kan du använda jQuery-tekniker som SuperFish för att göra detta. Vi kanske lägger till en handledning i framtiden.
Admin
tuba
mycket bra artikel, hjälpte mig med mitt wordpress-projekt, tack!
GrimCris
Bra artikel. Jag visste inte om CSS-klasserna i WordPress-menyer. Tack så mycket!
Keith Davis
Ni kan er Wordpress.
Detta är inte en enkel handledning men väl förklarad och bidrar definitivt till min förståelse.
Uppskattar att du utbildar oss andra.
Rick
Kompis! Grymt! Jag hade ingen aning om CSS-alternativ för menyer! Helt otroligt
Adam W. Warner
Bra skrivet, superinformativt! Jag insåg inte ens skärmalternativen för menyer.
Eli
Jag är inte säker på var jag ska placera den första php wp_nav_menu-koden. Skulle det vara i funktionsfilen eller headern eller...?
Tony
Visste inte om CSS Classes-menyalternativet! Tack för att du påpekade det.
Redaktionell personal
You are welcome
Admin
Steve Meisner
Jag heller! Det var precis vad jag behövde. Gud välsigne er alla och Wordpress-utvecklingsteamet!
Pieter
Respect for pointing out the css styles! I always used the css attribute to style a list item, but these styles are definitely more handy. You just earned yourself another feed subscriber!
Regards from Belgium.
Redaktionell personal
Kul att vi kunde hjälpa Pieter.
Admin