How to Create a Custom Mobile Menu in Divi - Using Divi Builder (No Plugin)

hey guys and welcome back to a new video so in today's video we are going to see how you can create this beautiful looking mobile menu in Divi very easily so this is how it looks as you can see it has this beautiful entrance animation and this content is built using the DB Builder itself and it does not require you to code to install your mobile menu to have beautiful looking mobile menu and yeah you might need a little bit of code for the working of this mobile menu but after that you don't need to mess up with the code and it's going to be very easy so just for the reference this is how the default DB mobile menu looks as you can see it's totally garbage and I really hope that elegant themes improves on this in future but yeah this is what you get out of the box and this is something that you can achieve by following today's tutorial so without wasting any time let's get started so you need to head to the blog post that I have written from the first link in the description of this video and here you will find everything that you need for the working of this mobile menu and yeah you can also download this layout from this tutorial page and you won't have to manually do all of this stuff so you can simply download it and you can also see the live demo over here all right so let's get started and see how you can recreate this right now I am in the Divi Builder this is how the header itself looks and this is a simple section right over here that I have designed and the width is 98 height is 75 view height and then we have some box Shadow and Border radius added and yeah you can simply design your mobile menu to look like anything you want with the builder there are no limitations and yeah once you have designed this mobile menu section and also your header section make sure that you are using the icon module and have a hamburger icon so that you can trigger the mobile menu pop-up so first off go to this tutorial and as you can see the first step is to make the first header header section the header section inline or Flex as you can see this is a two column row and I have added custom CSS display Flex so that it can be displayed in two columns as you can see [Music] looks better this way [Music] and now the next step would be to to make sure that you have created the content for your mobile menu and it should be a section could be a row anything and then make sure to add this code to that mobile menu section so that it hides inside the DB Builder but we can do that later and yeah let's move to the next up we have to set the position as fixed vertical offset 30 pixels and the index higher so that it sits on top of the other elements on the page let's do that real quick go to the section settings Advanced position and set it to fixed and then you can make sure that it is centered right over here set this to 30 pixels and have a higher Z index value like this this doesn't really matter well it does anyway back to the tutorial over here now we need to add this class to the section itself okay go to the section setting Advanced CSS ID and classes add it right over here now we need to add SJ ham icon to the hamburger icon that we have so let's first add this CSS to the section so that we can hide it custom CSS added here and it is hidden now in the DB Builder you can always you know remove it to edit the content and then add it back again when once you're done now go to this hamburger icon over here and add the class sjam icon add it right over here here now go back to the tutorial and here we need to copy this CSS all of it now let's go to the dashboard here go to DV and team options and scroll down and paste your CSS that you have copied right over here and then you can go back to the tutorial and then copy this JS code from here and then go back to your dashboard integration and here you can paste that code like this and then save the changes and that should be it now let's make sure to save all these changes and yeah that's how simple it is let's exit the visual Builder and as you can see this is how the section looks like in a desk group if we go to the mobile view as you can see now we have this hamburger icon if we click on it it shows our content for the mobile menu actually if you go to add this part we also have to add this class let me put the section back over here to show you so this is our mobile menu content make sure that you have a close icon set you can use icon modules for that as well and set the icon as close and and then add this class SJ close icon to this close button so that it can close the mobile menu when you click on it and yes that should be it our mobile menu is now looking a thousand times better than how it looks out of the box in DV you can literally create anything over here this is something I just created for the demo but you can do something creative you can use device toggle module to show more stuff when the user click on it and something like that and yeah that's pretty much it for this video you can find the link to this tutorial that I have written where you will find all the codes in the description of this video and yeah I'll see you in my next one till then have a great day

Channel: SamarJ

Views: 2,825

Keywords: Divi, Divi 4.0, Divi Tutorial, SamarJ, Custom Mobile Menu, Customize Divi Mobile Menu, Divi Builder, Divi tutorial, how to, Mobile Menu, Mobile Menu customization in divi, Mobile Menu for Divi, Sleek animation

Id: uo9ekKb9qWg

Length: 6min 27sec (387 seconds)

Published: Sat Apr 15 2023