Så här skapar du en mobilanpassad responsiv WordPress-meny

Mer än hälften av all trafik till en website kommer från mobila devices. Om din navigation menu inte fungerar bra på smartphones och surfplattor kan en stor del av din publik få svårt att hitta runt på din site.

Med många års erfarenhet av att bygga WordPress-webbplatser förstår vi vikten av att göra din webbplats mobilanpassad. På WPBeginner har vi alltid prioriterat detta och sett till att våra webbplatser är lätta att navigera på alla enheter.

Faktum är att vi har utformat en mobilanpassad meny som passar perfekt på mindre skärmar utan att kännas rörig, vilket förbättrar användarupplevelsen på smartphones och surfplattor.

I den här guiden visar vi dig hur du enkelt skapar en mobilanpassad responsiv WordPress meny.

Varför skapa en mobilanpassad responsiv WordPress-meny?

En väl utformad navigation menu hjälper besökarna att hitta rätt på din website. Men bara för att din meny ser bra ut på stationära datorer betyder det inte automatiskt att den också kommer att se bra ut på mobila vyer och surfplattor.

Mobila användare utgör cirka 58% av all internettrafik. Om din meny inte ser bra ut eller fungerar korrekt på mobila enheter riskerar du att förlora halva din publik på grund av dålig användarupplevelse.

Detta kommer att göra det svårt att uppnå viktiga mål som att öka din email list, få försäljning och få ditt företag att växa.

Med det sagt, låt oss se hur du kan skapa en mobilanpassad responsiv menu som kommer att se bra ut på smartphones och surfplattor. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda.

Metod 1: Skapa en mobilanpassad responsiv slide panel meny

En responsive slide panel är en navigation menu som slides på skärmen när en visitor tapar eller clickar på en toggle.

På så sätt finns menyn alltid inom räckhåll, men tar som standard inte upp någon plats på skärmen.

Detta är viss import eftersom smartphones och surfplattor har mycket mindre vyer jämfört med stationära datorer.

Om menyn konstant förstoras kan en mobil användare av misstag utlösa dess links med hjälp av touchskärmen på sin device. Detta gör slides paneler till ett bra val för en mobil responsiv meny.

Det enklaste sättet att add to en mobilanpassad slides panel är genom att använda Responsive Menu.

Först måste du installera och aktivera pluginet Responsive Menu. För mer detaljer, se vår tutorial om hur du installerar ett plugin för WordPress.

Efter aktivering kan du använda pluginet för att customize alla WordPress-menyer som du tidigare har skapat. Om du behöver skapa en ny meny, vänligen se vår guide för nybörjare om hur du lägger till en navigation menu i WordPress.

Å andra sidan, om your WordPress theme redan har en built-in mobilmeny, måste du känna till den menyns CSS-klass så att du kan dölja den.

Om du hoppar över det här steget kommer mobila användare att se två överlappande menyer på din website. För Step-by-Step instruktioner, vänligen se vår guide om hur man döljer en mobil meny i WordPress.

När det är gjort går du till Responsive Menu ” Menus page på WordPress admin sidebar och klickar på knappen ”Create New Menu”.

Du kommer nu att se några olika mobila responsiva teman som du kan använda för din menu.

Vi använder ”Default Theme” i våra bilder, men du kan använda vilket tema du vill. När du har bestämt dig klickar du på ”Nästa”.

Du kan nu skriva in ett namn för menyn. Detta är bara för din referens så du kan använda vad du vill.

När du har gjort det klickar du på ”Link WordPress Menu” och väljer den meny som du vill använda.

Som redan nämnts, om ditt theme redan har en built-in mobil meny, måste du add to dess CSS-klass till fältet ”Hide Theme Menu”.

Om du uppgraderar till premium plugin får du några ytterligare inställningar. Pro-användare kan till exempel dölja menyn på vissa sidor eller enheter.

När du är nöjd med hur menyn är uppbyggd klickar du på ”Create Menu”.

Du ser nu en förhandsgranskning av din WordPress-webbplats till höger på skärmen och några inställningar till vänster.

Om du vill se hur din site ser ut på mobilen klickar du på antingen mobil- eller surfplatteikonen längst ner till vänster på vyn.

Om du vill customize hur menyn ser ut och fungerar på mobila enheter väljer du ”Mobile Menu”.

Klicka sedan på ”Container”.

Här hittar du massor av olika Settings.

När du gör ändringar kommer Live Preview ofta att uppdateras automatiskt. Med detta i åtanke är det en bra idé att förstora menyn så att du kan se hur din mobilmeny kommer att se ut. För att göra detta klickar du helt enkelt på knappen menu toggle.

Som standard lägger pluginet till en Rubrik och lite ”Add more content…” text.

Du kan ersätta detta med ditt eget meddelande eller till och med ta bort texten helt. Om du vill redigera titeln klickar du på för att expandera avsnittet ”Titel”.

You can now type your own message into the ”Rubrik Text” field.

Du kan också lägga till en länk till titeln eller lägga till ikontypsnitt och bilder.

Om du vill customize hur rubriken ser ut klickar du på tabben ”Styles”.

Här kan du ändra bakgrundsfärg, textfärg, storlek på font med mera.

Om du inte vill visa någon rubriktext klickar du på för att deactivate togglen bredvid ”Rubrik”.

Om rubriken inte är viktig kan du ta bort den för att skapa mer utrymme för links och annat content i din mobila navigation menu.

Om du vill ersätta texten ”Add more content here….” med ditt eget meddelande klickar du på ”Click” för att förstora area ”Additional Content”.

You can now type in your own text, change the text color, change the text alignment, and more by using the settings in the left-hand menu.

Om du vill delete texten helt och hållet klickar du bara på för att deactivate toggle.

Återigen kan detta skapa mer utrymme för resten av innehållet i menyn. Detta är viss nytta på smartphones och surfplattor, som vanligtvis har mindre vyer.

Som standard visar Responsive Menu alla dina menu items som en enda lista. Du kanske dock föredrar att visa dessa links i flera Column.

Detta kan fungera bra om dina menyetiketter är kortare, eftersom det allow you att visa fler items på en mindre yta utan att menyn ser rörig ut.

För att prova olika layouts för Column, click för att förstora sectionen ”Menu”.

Du kan nu öppna dropdown ’Menu container columns’ och välja antalet columns du vill använda.

Kl. 12.00 kan du se texten ”Update Required”. Om du ser det här meddelandet, ge det ett klick för att uppdatera live preview med dina nya inställningar för column.

Som standard lägger plugin också till ett search-fält i din WordPress meny. Detta kan hjälpa visitorerna att hitta intressant content, men tar också upp dyrbart utrymme på skärmen.

Om du föredrar det kan du ta bort sökfältet för mobila användare genom att deactivate toggle bredvid ”Search”.

Det finns många andra Settings som du kan konfigurera, så du kanske vill ägna lite tid åt att titta igenom de andra alternativen. Detta räcker dock för att skapa en väldesignad mobilanpassad meny.

När du är nöjd med hur navigations menyn är uppbyggd, clickar du på ”Update”.

Nu är det bara att besöka din WordPress-blogg med en mobil enhet för att se den nya menyn i aktion. Du kan också visa den mobila versionen av din WordPress-webbplats från din dator.

Metod 2: Skapa en mobilanpassad responsiv meny med fullskärm

Ett annat alternativ är att add to en fullscreen responsive menu. Det är en meny som automatiskt anpassar sig till olika skärmstorlekar, så att navigationsmenyn alltid ser bra ut oavsett vilken device besökaren använder.

Eftersom menyn tar upp all available space blir den lättare att navigera i på smartphones och surfplattor, oavsett hur liten vyn är.

Det enklaste sättet att skapa en fullskärmsmeny är att använda FullScreen Menu. Detta plugin allow you to create a fullscreen menu for mobile devices only, or you can show the same menu across smartphones, tablets, and desktop computers, so all visitors have the same experience.

Det första du behöver göra är att installera och aktivera FullScreen Menu plugin. Du kan kontrollera vår Step-by-Step guide om hur man installerar en WordPress plugin för mer detaljer.

Vid aktivering, besök sidan Fullscreen Menu Options från WordPress-menyn och kontrollera följande box: ”Activate Animated Fullscreen Menu” (Aktivera animerad fullskärmsmeny).

Vi rekommenderar också att du kontrollerar boxen ”Show the menu only for Admin users”. Detta allow dig att se ändringarna när du konfigurerar menyn, men besökarna kommer inte att se den mobila menyn förrän du gör den live.

Som standard visar pluginet fullskärmsmenyn på alla enheter. Om du vill visa fullskärmsmenyn endast på smartphones och surfplattor kontrollerar du boxen bredvid ”Mobile only”.

Därefter kan du finjustera utseendet på menyn genom att klicka på fliken ”Design / Appearance”.

Här kan du välja färger, font och animationsinställningar för fullskärmsmenyn.

När du gör dessa ändringar ska du bara vara medveten om att ”Initial bakgrundsmeny” är menuens icon för toggle. Under tiden är ”Öppnad bakgrundsmeny” färgen på den förstorade mobilmenyn i fullskärm.

När du har valt färgerna på menyn rullar du till section ”Menu Appearance”. Här kan du ändra färgen på, familjen av och storleken på fonten i menyn.

Tänk bara på att om du hämtar ytterligare fonts kan det påverka din WordPress sites prestanda och hastighet. Detta är inte alltid ett bra val för mobila enheter, som vanligtvis har mindre processorkraft jämfört med stationära datorer. Vissa besökare kan också ha en dålig mobil internetanslutning, vilket gör att din site laddas ännu långsammare.

När du har gjort det rullar du till ”Animation Settings.”.

Till att börja med kan du välja hur menyn ska förstoras när en visitor klickar på ikonen toggle. Öppna bara dropdown-menyn ”Animationstyp” och välj ett alternativ från listan, till exempel Från högst upp till längst ner eller Från vänster till höger.

När du är nöjd med menyns layout kan du klicka på fliken ”Menu Content” för att lägga till innehåll.

Här går du vidare och öppnar dropdown ”Select Menu” och väljer den meny som du vill visa i helskärm.

Om du ännu inte har skapat en navigationsmeny kan du kontrollera vår guide om hur du lägger till navigationsmenyer i WordPress.

Om du vill visa ytterligare content i menyn kan du add to det i boxen ”Free HTML / Shortcodes”. Detta fungerar som en minisidredigerare så att du kan skriva in text, ändra formatet, add to punktlistor och numrerade listor, med mera.

Det finns också en checkboxes som add to en link till your privacy policy page.

Sedan kanske du gillar att add to social media icons till din WordPress meny. Dessa icons kommer att visas i en row längst ner i fullskärmsmenyn.

För att add to dessa icons, clickar du bara för att förstora boxen ”Social Icon 1”.

You can now type in a title for the icon, such as ”Facebook”.

Därefter klickar du på pilen bredvid ”Social Icon” och väljer den icon som du vill visa för mobila besökare.

Slutligen skriver du in den adress du vill använda i fältet ”Social URL”.

Om du vill add to fler icons klickar du bara på knappen ”Add Another Icon”.

Slutligen kanske du vill add to ett sökfält i WordPress för att hjälpa besökarna att hitta det de letar efter. För att göra detta kontrollerar du bara boxen bredvid ”Add Search Bar”.

Som standard kommer plugin att visa ett ”Search something…” message. Du kan dock ersätta detta med ditt eget customize message genom att skriva in det i ”Search input placeholder” field.

Om du till exempel runar en WooCommerce store kanske du vill använda text som ”Start shopping” eller ”Search for products”.

När du är nöjd med menykonfigurationen klickar du på knappen ”Spara ändringar”.

Nu behöver du bara besöka din website med en mobil device för att se fullskärmsmenyn i action.

Du kan också previewa den mobila versionen av din website med hjälp av WordPress theme customizer.

Bonus: Hur man lägger till en mobil responsiv meny på Landing Pages

Om du skapar en landing page eller en försäljningssida vill du att designen ska se lika bra ut på mobila enheter som på stationära.

Med detta i åtanke rekommenderar vi att du skapar page med SeedProd. Det är den bästa page buildern för WordPress och kommer med mer än 300+ professionellt utformade templates.

När du har skapat en design med SeedProd kan du add to en mobil responsiv meny till sidan med SeedProd’s färdiga Nav Menu block. Detta block allow you att skapa separata menyer för både menu devices och desktops.

På så sätt kan du använda en annan layout och till och med visa olika links beroende på användarens device.

Mer information finns i vår guide om hur du lägger till egna navigeringsmenyer i WordPress.

När du har lagt till Nav-blocket i din design klickar du helt enkelt på tabben ”Advanced”.

Här klickar du för att förstora sectionen ”Device Visibility”.

Därefter klickar du på ”Hide on Desktop” toggle för att aktivera den. Nu kommer den här menyn bara att visas på mobila enheter.

Du kan nu lägga till links och ändra layouten på menyn via inställningarna i vänstermenyn.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar en mobilanpassad responsiv WordPress-meny. Du kanske också vill se vår nybörjarguide om hur du lägger till en font resizer i WordPress och våra experttips om hur du skapar en mobilvänlig WordPress-webbplats.

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.