Vill du dölja en mobil menu i WordPress?
De flesta teman i WordPress omvandlar automatiskt dina standardmenyer för navigation till mobilvänliga menyer. Du kanske dock vill visa en annan meny för personer som besöker din site med smartphones eller surfplattor.
I den här artikeln kommer vi att visa dig hur du enkelt döljer standard mobilmenyn i WordPress så att du kan visa en custom menu istället.
Vi kommer att täcka två olika metoder i denna tutorial, och du kan använda snabblänkarna under för att hoppa till den metod du vill använda:
Metod 1: Dölj en mobil meny i WordPress med hjälp av ett tillägg
Det enklaste sättet att dölja den mobila menyn som tillhandahålls av ditt WordPress theme är att använda WP Mobile Menu plugin.
Detta plugin allow you att skapa en unik menu och sedan visa den för mobila användare. You can also hide the mobile menu that many themes provide by default.
Skapa din mobila meny
Först måste du skapa den navigation menu som du vill visa på mobila enheter. För att komma igång, gå till sidan Appearance ” Menus i WordPress dashpanel.
På nästa vy måste du skriva in ett namn för menyn. Det är en bra idé att använda något som hjälper dig att identifiera menyn senare, t.ex. ”Mobile Menu”.
Efter det kan du välja alla de posts och pages som du vill add to i mobilmenyn.
För mer detaljer, se vår guide om hur du skapar en navigation menu i WordPress.
När du är nöjd med layouten på menyn, kom ihåg att clicka på knappen ”Save Menu” för att save your changes.
Konfigurera Settings för tillägget
När det är gjort är det dags att installera och aktivera pluginet WP Mobile Menu. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.
Efter aktivering, head till Mobile Menu Options för att konfigurera plugin-inställningarna.
Här måste du rulla längst ner på sidan och välja om du vill visa mobilmenyn på vänster eller höger sida av vyn med hjälp av togglarna ”Enable Left/Right Menu”.
Öppna sedan dropdown-rutan ”Choose one menu” och select den mobila meny som du skapade tidigare.
Därefter klickar du helt enkelt på ”Save Changes”.
Det finns många sätt att styla din navigation menu i WordPress. Du kan t.ex. välja ”Font Options” och sedan ändra teckenstorlek, vikt, avstånd med mera.
Du kan också välja ”Header Style” och ändra hur mobilens header ser ut och fungerar.
Du kan till exempel add to en skugga, ändra höjden på rubrikerna, skapa en sticky navigation menu med mera.
De flesta av dessa Settings är enkla, så du kan titta igenom dem och se vilka olika effekter du kan skapa. Du kan till exempel lägga till en icon för images eller add to CSS i dina WordPress-menyer.
När du är nöjd med hur den mobila menyn är inställd klickar du bara på ”Save Changes”.
Add to din mobila meny till WordPress
Nu när du har konfigurerat pluginet är nästa steg att berätta för WordPress var du ska visa mobilmenyn genom att gå till Appearance ” Menus.
Om den inte redan är vald öppnar du dropdown ”Select a menu to edit” och väljer den mobila menyn som you skapade tidigare.
Under ”Menu Settings” måste du sedan välja antingen ”Left Mobile Menu” eller ”Right Mobile Menu”, beroende på var du vill visa menyn.
Därefter klickar du helt enkelt på ”Save Menu”.
Nu kan du antingen besöka din website på en mobil device eller viewa mobilversionen av din site på WordPress från datorn. Du bör se den anpassade mobila menyn.
Felsökning: Hur man döljer standard Mobile Menu
Som standard döljer pluginet automatiskt menyelement som används av de flesta populära WordPress-themes. Detta innebär att ditt temas standardmobilmeny bör döljas utan att du behöver göra något.
Men om standard mobilmenyn fortfarande visas, måste du gå till Mobile Menu Options ” Allmänna Options ” Synlighetsalternativ i WordPress dashpanelen.
Här klickar du på knappen ”Find Element”.
Detta öppnar en mobilversion av din website.
I den här popupen klickar du för att selecta det content som du vill dölja på mobila enheter, t.ex. menyn i ditt WordPress theme.
Detta add to the content’s CSS class to the ”Hide Elements” field.
När du har gjort det klickar du på ”Save Changes”. Nu ska temats meny inte längre visas på mobila enheter.
Metod 2: Dölj mobilmenyn med CSS-kod
Den här metoden är lite avancerad och kräver att du addar custom code till din website.
För den här metoden kan du välja mellan två olika tillvägagångssätt. Du kan dölja hela standardmenyn för mobila enheter med hjälp av CSS, eller så kan du dölja enskilda menu-items på mobila enheter.
1. Dölja en komplett menu på mobila enheter med hjälp av CSS
Ett alternativ är att helt ta bort standardmenyn för mobila enheter från ditt WordPress-tema. Detta är ett bra val om du vill använda en annan navigeringsmetod på mobilen, t.ex. breadcrumb navigation-länkar eller interaktiva images.
Först måste du hitta det element som du behöver ändra. Det gör du genom att gå in på din WordPress website och hovera musen över navigation menu.
Därefter högerklickar du och väljer din webbläsares inspektionsverktyg.
Din webbläsare kommer nu att dela sig i två vyer och du kommer att se sidans kod, inklusive koden för navigation menu.
Vi vill dock inte ändra denna navigation menu eftersom vi kan se den på skrivbordsskärmen.
Tack och lov finns det ett enkelt sätt att komma åt den mobila menyn istället.
Dra helt enkelt i hörnet på webbläsaren för att göra den mindre tills WordPress ersätter navigationsmenyn på skrivbordet med den mobila menyn.
Nu måste du ta reda på vilken ID och CSS-klass som används av den mobila navigationsmenyn. Flytta bara musen över källkoden tills din webbläsare markerar area för menyn. Denna section innehåller den klass och ID som du behöver använda.
När du har den här informationen kan du dölja menyn på mobila enheter med hjälp av kod.
Ofta kommer WordPress guider att be you att add custom code till din functions.php-fil. Detta är dock inte särskilt användarvänligt, och även ett litet misstag i koden kan orsaka alla möjliga vanliga WordPress error. Den anpassade koden kan till och med helt förstöra din website.
Istället är det säkrare att add to custom kod med hjälp av WPCode.
Detta gratis plugin gör det enkelt att add to custom CSS, PHP, HTML och mycket mer till WordPress utan att riskera din site. Du kan helt enkelt klistra in plugin-koden i WPCodes editor och sedan aktivera och deactivate koden med ett klick på en knapp.
Till att börja med måste du installera och aktivera WPCode. För mer information, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.
Därefter går du till Code Snippets ” Add Snippet i WordPress dashpanelen.
Here, you will see all the pre-made snippets you can add to your site. Detta inkluderar ett snippet som allow you att helt inaktivera comments, upload file types that WordPress doesn’t usually support, disable attachment pages, and much more.
För att add to CSS till din site, hoverar du bara över ”Add Your Custom Code” och väljer sedan ”Use snippet”.
Till att börja med skriver du in en titel för code snippet. Det kan vara vad som helst som hjälper dig att identifiera snippet i din WordPress dashboard.
När du har gjort det öppnar du dropdown-menyn ”Code Type” och väljer ”CSS”.
Följaktligen kan du klistra in eller skriva följande kod i code type editorn:
.navbar-toggle-wrapper {
display:none;
}
Glöm inte att ersätta .navbar-toggle-wrapper med den ID som du hittade med hjälp av webbläsarens Inspect tool.
När du är redo att publicera code snippet rullar du högst upp på vyn och klickar på ”Inactive” toggle så att den ändras till ”Active”.
Slutligen klickar du på ”Save Snippet” för att göra snippet live.
Nu kommer ditt temas mobila menu att vara dold på smartphones och surfplattor.
2. Dölja specifika menu items i mobilmenyn med hjälp av CSS
Med den här metoden allow you att skapa en navigation menu och sedan select visa eller dölja objekt som you inte vill ska visas på mobila eller stationära enheter.
På så sätt kan du använda samma navigation menu för mobila och stationära besökare. Gå först till Appearance ” Menus.
När du har gjort det klickar du på knappen ”Screen Options” högst upp till höger på skärmen.
Härifrån måste du kontrollera boxen bredvid alternativet ”CSS Classes”.
Därefter rullar du till ett menu item som du vill dölja på mobilen och klickar för att förstora det.
I inställningarna för menu-item ser du alternativet att lägga till en CSS-klass. Här går du helt enkelt vidare och add to en .hide-mobile CSS-klass.
Upprepa processen för alla menu-items som du vill dölja på mobilen.
På samma sätt kan du clicka på alla menu items som du vill dölja på stationära datorer. Den här gången ska du dock add to CSS-klassen .hide-desktop istället.
När du är slutförd, glöm inte att klicka på knappen ”Save Menu” för att spara dina ändringar.
När det är gjort är du redo att dölja dessa menu items med hjälp av custom CSS. Skapa helt enkelt ett nytt custom code snippet genom att följa samma process som beskrivs ovan.
Nu kan du add to följande CSS till WPCode code editor:
@media (min-width: 980px){
.hide-desktop{
display: none !important;
}
}
@media (max-width: 980px){
.hide-mobile{
display: none !important;
}
}
Efter det är det bara att publicera code snippet.
Om du nu besöker din WordPress blogg kommer du att se att de menu items som du ville dölja på datorn inte längre är synliga. För att testa hur menyn ser ut i mobilen krymper du helt enkelt webbläsarens vy tills WordPress växlar till mobilmenyn.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt döljer en mobil meny i WordPress. Du kanske också vill se våra expertval för de bästa drag and drop page builders i WordPress och vår guide om hur man lägger till villkorlig logik i menyer.
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.
Har du en fråga eller ett förslag? Lämna gärna en kommentar för att starta diskussionen.