6.3 Style The Mobile Menu in the Divi Theme Builder

[Music] so the final chapter to creating our global header is styling the mobile menu and it should look something like this with our top bar up here and then we have our hamburger menu and when we tap it it expands in a full width menu with all our links so we head back to the theme builder and mobile optimizing your design is pretty easy in divi down to the left you have your different devices so you can preview it in tablet or in mobile and all the design settings you do for tablet will be inherited to the mobile settings so it's a time saver to actually start with the tablet design and then go to mobile and tweak if you want to do something different specific for mobile so what we can see here is that the top part looks a bit strange in desktop we have two columns but in tablet and mobile the responsive design breaks these two columns into one column so they are put on top of each other so this is good most of the times but now i want to have these two columns side by side so we're going to fix that with a small css snippet so we head back to the desktop view and i will click the cogwheel for the row and we'll go to the advanced tab but don't worry this is not too advanced we open the custom css tab and this is available in all sections rows and modules so you can tweak the css here if you want to in the main element i'll type display column flex and a semicolon and if i preview it in a tablet i can now see that there are actually two columns side by side and the same thing for mobile but i can see that there's a spacing here that i don't want so let's fix that by going to the design tab sizing and use custom gutter width and i choose yes so by reducing this to one we tighten up the space inside of this row perfect so we have a nice looking top bar so now we could fix the design of the hamburger menu so if i open it it will be white background with white text so it's kind of hard to read it's some kind of green turquoise color here on the hamburger menu and it's not full width so we have some work to do here so i'll open the options for the mobile menu and i go to the design tab and we'll click the drop down menu because the mobile menu is a drop down menu and the background of the drop down menu should be dark gray so now it looks much better already and if we scroll down we have the mobile menu background color well we can add that as a dark gray as well it doesn't make any difference and we also have to have the mobile menu text color so we can set that to white even if it's white already so we can go to icons and we can change the styling of the hamburger menu icon color from this green color to white so now it looks much better i can also change the size of the hamburger menu but i think the default size looks pretty good so i can just undo this by clicking this circular arrow icon so this looks pretty fine but i want to do two additional tweaks and i will give you two css snippets the first one will make this icon turn into an x or a close icon when i open the mobile menu i think that looks nicer and the second css snippet will make this one full width so we'll have this design we have the close icon and the full width menu so let's head to divi mundo dot there we go and we'll head to the english site if you don't prefer spanish and we go to the blog and we scroll down and we find six tips for a better dv mobile menu and we'll use two of these tips so we scroll down and there we have change the collapse hamburg icon in to an x when open that one so i will simply copy this css snippet i will exit the theme builder and we'll go into the divi theme customizer to add some custom css so we choose db beam customizer so this is another way to add custom css to dv and in the bottom we have additional css so here i can paste the snippet and if i preview it in mobile and click here i can see that it has already changed to the close icon and then we had the other snippet to make this full width so we scroll down make the mobile manifold with number five and i'll copy that one and i paste it in the db theme customizer sweet it's full width okay let's close that and we go back to the tv theme builder for a final tweak so now the if i refresh this one and let's have a look in the mobile mode and i scroll it will be sticky and i would actually like to turn off the sticky mode for just the mobile menu because this is a small screen and i don't want the menu to take up place when you scroll so let's go back to the theme builder and to the section where the menu is i click the cogwheel i go to advanced and scroll effects so this was where we set that we want to add stick to top as for our menu and then i click the responsive settings on this icon with the smartphone and i go to tablet and i say for tablet i don't want this to stick to top i say do not stick and when i go to phone you can see that this value is inherited from the tablet mode so i click save and i click or choose command s on my mac or ctrl s on pc to quick save and if i go back to my website and refresh and scroll we can see let's refresh that once more hmm okay i did something wrong there let's go back okay i didn't save it click save and exit again and we go back and refresh this and now when i scroll it's gone so it's not sticky anymore so that was creating installing a mobile menu in divi you

Channel: DiviMundo

Views: 1,305

Keywords:

Id: _LKpZ45k8-I

Length: 8min 14sec (494 seconds)

Published: Fri Jun 25 2021