How To Style The Divi Mobile Menu In 6 Steps

hi i'm victor from divimundo.com and in this tutorial i will show you how to improve your dv mobile menu in six steps and in the end i will share my own header template where i've used these css snippets for a free download this blog post on dbmundo.com contains all the resources and css snippets needed if you're watching this on youtube you can find the link in the description below the video so to the left we have the default dv mobile menu and to the right you can see it with the six improvements so the first thing we are going to do is adding this menu text to the left of the mobile menu icon after that we will replace the hamburger menu with a close icon when it's expanded number three is to remove this line after that we will center align the link items we will make the mobile menu full width which is one of my favorite improvements and the last one is making it full height and i made some efforts to make this work for both the old theme customizer menu and for the new divi theme builder menu so it should work for both number one adding the menu text to the left of the hamburger menu so this is the look that we are going for and we'll use this css snippet and if you are using the theme builder menu you only need to use this part and if you are using the default theme customizer menu you can use this one in this case we will test it on both so i'll copy the complete code and i'll go to my wordpress dashboard and from there we'll head to db and theme customizer and one nice thing about the theme customizer is that we can actually preview in ipad or tablet and smartphone view so we can see the changes live to our mobile menu i've created two pages with two different menus so this one has the theme builder menu it looks like this by default and here we have the theme customizer menu and it looks like this by default let's go to the additional css tab i'll paste the css snippet and there you can see that you have the menu text to the left of the hamburger menu if we head over to the theme customizer menu you can see the same result here you can play around with these numbers here to change the position and also of course the color of the text and you can also change text here just some quick troubleshooting if you display the search icon and or the shopping cart icon from woocommerce in the menu you will have some overlapping issues with the menu text but luckily there's an easy fix for that so let's head back to the blog post we can click this one fix overlapping when displaying search icon and or cart icon let's just copy this css snippet and paste it below the first one and as you can see we now have some space between the menu text and the search icon and this also works for the theme customizer menu and if you have the cart icon activated as well number two change the collapse hamburger icon to an x this is the result that we are going for let's just copy this css snippet and we'll head back to the theme customizer an additional css let me expand this menu first keep an eye here on the icon and there we go so this is how it looks when it's closed and this is how it looks when it's open and if we check out the theme customizer menu you will see the same result here but maybe you want to change the color of the close icon and yes that's possible so let's head back to the blog post and expand this bonus i'll copy this one we can now see that this one is blue and if i paste this one you can see that it's now black we could of course change this one to maybe red if you would like to and this also works with the theme builder number three remove the mobile menu top border line it's a really easy way to tell if you are visiting a dv website and that is if you have this blue line here in the mobile menu so let's remove this one to have a more unique look we'll start by copying this snippet so there we have the line and actually in the theme builder the line is a little bit too high because it's attached to the menu module and not the section and if we go to the theme customizer it looks a little bit better because it's in the right place but still i would like to remove this one i'll paste the code it's gone and if we head back to the theme builder let's just have a look that it works for that too yes the line is gone number four center align the mobile menu link items so by default the mobile menu in db is left aligned but this way we can have the text centered i'll start by copying this css snippet and as you can see the menu text is left aligned and when i paste the text boom its center line number five making the mobile menu full with this is one of my favorites so let's copy this snippet and as you can see the mobile menu in db is not full width by default but if we paste the snippets and we can also check out the theme customizer menu to see that we get the same result there and we do some quick troubleshooting this one works perfect if you use the theme customizer menu and it will also work flawless if you use the theme builder menu with the default settings but in some cases you might experience that the menu is pushed a bit to the left and the most likely reason for this is that you use the theme builder and that you have changed the width of the row that contains the menu module so if i go here to the design tab of the row settings in the header template and sizing i can see that this row has a 90 percent width instead of the default 80 luckily there's a fix for this one too we just have to nudge the numbers a bit the margin left should be changed in this case to five so if i refresh and open the menu we can see that it's now in the right place play around with this number to get it right if it doesn't work on the first try and this is also described in the blog post number six make the mobile menu full height this is the last step and i have to admit that it was a tricky one but i found a solid solution let's copy this snippet and head back to the website if i open the menu you can see that it's not full height by default if i paste this snippet you have a full height menu i had to remove the sliding down and sliding up animation as you can see when i click it here it will just open and close without any animation this is needed in order to get the full height design working if you prefer to have the sliding animation you can just remove the full height css code as a bonus you can download a free divi theme builder header layout that i've created using all the six steps that we come through in this tutorial it has a nice top bar with social media links and the phone number you have the logo and then we have the menu text and if we click to expand you can see that we have this close icon the menu is full width it's full height and the text is center aligned so just head over to the blog post and scroll down a bit and subscribe to the newsletter and you will have the download link for this header template that's all for today so if you're going to use anything from this video please let me know in the comments below and don't forget to subscribe for more tutorials coming your way thanks for watching [Music] [Applause] [Music]

Channel: DiviMundo

Views: 560

Keywords:

Id: jFLGFPjx55w

Length: 8min 36sec (516 seconds)

Published: Mon Oct 04 2021