Vill du lägga till en hamburgerikon till menymodulen för Divi ?
Om du bygger in din header Divi, det finns flera sätt att göra detta.
Vi kommer att visa dig hur du lägger till en hamburgerikon i menymodulen för Divi. Denna hamburgerikon visas redan som standard på mindre skärmar. Men i den här handledningen kommer vi att se till att en hamburgerikon också visas på skrivbordet.
Detta ger ett minimalt utseende till din rubrik samtidigt som det lägger till interaktion.
Låt oss gå.
undersökningen
Innan vi dyker in i den här handledningen, låt oss ta en snabb titt på resultatet.
Ladda ner DIVI nu!!!
Skapa en ny global huvudmall med Divi Builder
Gå till Divi Theme Builder
Från WordPress-instrumentpanelen, gå till 'Divi > Theme Builder' Klicka sedan "Lägg till global rubrik"
Lägg till en ny global rubrik
En rullgardinsmeny visas. För att börja bygga från början, fortsätt genom att välja "Bygg global header".
Designa den globala headerdesignen
Avsnitt inställningar
Bakgrundsfärg
Väl i mallredigeraren är det dags att börja designa rubriken. Du kommer att märka att det redan finns ett avsnitt. Öppna avsnittsinställningarna och lägg till en bakgrundsfärg.
- Bakgrundsfärg: #f6f9fb
avstånd
Byt till flik Designa i avsnittet och ändra följande parametrar.
- Utfyllnad (topp och botten): 0px
Lägg till en ny rad
Strukturen av kolonnen
Fortsätt genom att lägga till en ny rad med följande kolumnstruktur:
dimensionering
Öppna linjeinställningarna, gå till fliken Designa och ändra den maximala bredden i storleksinställningarna.
- Max bredd: 1px
avstånd
Ändra sedan topp- och bottenstoppningen i avståndsinställningarna.
- Utfyllnad (topp och botten): 5px
Lägg till en menymodul i kolumnen
Välj menyn att lägga till
Lägg sedan till en menymodul i radkolumnen och välj en dynamisk meny som du väljer.
Ladda ner logotyp
Ladda ner en logotyp.
Ta bort bakgrundsfärg
Ta sedan bort standardvit bakgrundsfärg från modulen.
Menytextinställningar
Byt till flik Designa i modulen och ändra textparametrarna för menyn i enlighet med detta:
- Teckensnittsmeny: Poppins
- Meny Teckensnittsvikt: Halvfet
- Textfärg: #003e51
- Menytextstorlek: 16px
- Textjustering: Höger
Inställningar för rullgardinsmenyn
Ändra sedan inställningarna från rullgardinsmenyn.
- Färg på rullgardinsmenyn: #7159c8
Ikoninställningar
Ändra även ikoninställningarna.
- Varukorgsikon Färg: #670fff
- Sökikon Färg: #670fff
- Hamburgermenyikon Färg: #670fff
dimensionering
Gå sedan till storleksinställningarna och tilldela en maximal bredd på logotyp.
- Logotyp Max bredd: 280px
avstånd
Ta också bort standardbottenmarginalen från modulen.
- Marginal (botten): 0px
Gör avsnittet klibbigt
Nu när vår meny är på plats kommer vi även att göra avsnittet klibbigt. Öppna avsnittsinställningarna, gå till fliken Advanced Open water och tillämpa följande inställningar:
- Sticky Position: Stick To Top
- Offset från omgivande klibbiga element: JA
- Övergångsstandard och Sticky Styles: JA
Bakgrundsfärg i klibbigt tillstånd
Ändra sedan bakgrundsfärgen för avsnittet till klibbigt tillstånd.
- Bakgrundsfärg: #ffffff
Sticky state box skugga
Applicera också en boxskugga på sektionen.
- Skuggfärg (skrivbord): rgba(0,0,0,0)
- Skuggfärg (klibbig): rgba(0,0,0,0.04)
Lade till en hamburgerikon i menymodulen
Lägg till CSS ID till menymodulen
Öppna först menymodulens inställningar, gå till fliken Advanced Open water och tilldela ett CSS-ID.
- CSS ID: divi-meny
Lägg till en kodmodul under menymodulen
Lägg sedan till en kodmodul under menymodulen.
Lägg till skript- och stiltaggar
Vi kommer att använda CSS och JQuery-kod. För att förbereda oss för detta lägger vi till stil- och skripttaggar.
Lägg till CSS-kod
Vi kommer att klistra in följande rader med CSS-kod mellan stiltaggarna:
.toggle-icon:after {
content: "61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
transform: translateY(50%);
}
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
.icon-switch:after {
content: '4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
Lägg till JQuery
Lägg till rader med öppningskod för JQuery
Därefter kommer vi att ha JQuery-koden. Lägg till följande rader med JQuery-kod mellan skripttaggarna:
jQuery(function($){
$(document).ready(function(){
});
});
Skapa variabler
Skapa några variabler härnäst.
var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');
Placera växlingsikonen i menymodulen
Placera sedan växlingsikonvariabeln i menymodulen med hjälp av följande kodrad:
toggleIcon.insertAfter(desktopMenu);
Lägg till en klickfunktion
Vi lägger även till en klickfunktion.
toggleIcon.click(function(){
desktopMenu.toggleClass('reveal-menu-items');
$(this).toggleClass('icon-switch');
});
Spara ändringar i Divi Theme Builder
Nu när allt är på plats återstår bara att spara alla Divi Theme Builder-modifieringar och se resultatet!
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på slutresultatet.
Ladda ner DIVI nu!!!
Slutsats
I den här artikeln visade vi dig hur du blir kreativ med din globala rubrik i Divi Theme Builder.
Specifikt har vi visat dig hur du lägger till en hamburgermenyikon på skrivbordet också. Som standard visas en hamburgerikon på surfplatta och mobil.
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att slutföra dina webbplatsskapande projekt. Eller se även vår guide på WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
