How to Create a Responsive Slide-In Menu with Divi’s Theme Builder

[Music] [Music] [Music] [Music] [Music] hey divination thank you for joining us in this livestream today we'll show you how to create a slight in menu with Divis theme builder and we'll also use the yoga instructor layout back so if you haven't checked that out yet make sure that you do I've mention a link in the description below and if you're non elegant themes might be at make sure that you check out Divi I've mentioned a links to the product page where you can go ahead and discover everything for yourself so without any further ado let's get to it all right I just want to say hi to everyone on YouTube and on Facebook if you guys have any questions make sure that you leave a comment in on the live chat on YouTube or in the comment section on Facebook alright so let's get started before I get into the tutorial I'll just show you the yoga instructor layout bike which I'll use for this tutorial so if you go to elegant themes are calm slash layouts you can find all of the layout bikes that come with Divi for free and if you scroll down you'll come across one of the recent ones being the yoga instructor layout back so this is the overall look and feel that we'll use within this tutorial to create our slide in menu so this menu in particular will match this layout back really well but you can find unit to use it on other websites too so what is the outcome of our tutorial let's take a quick look alright so over here I have the landing page installed and in the top right corner you can see a hamburger icon and I have a logo in the top left corner as well now if I click on this I will see a slide and menu appear and this is custom built with these theme builders so we're combining the best of both worlds we're using a bit of custom code and all of deviis building elements to create this and if I click it again it goes away and this is completely responsive it looks great across all screen sizes over here I have the example on a mobile phone if I click it it appears and it goes away again just like that alright so let's get started and I'm just gonna check out the comments really quick I see a lot of people already joining in on YouTube hi Lila a great young Alberto uncle social and I did yeah it's nice to see you guys here I hope you will enjoy it and of course as always make sure to leave me comments if you have any questions I see someone on Facebook as well XE I hope them that I'm pronouncing that right all right cool let's get to this so the first thing you will need to do is go to your DV theme builder and over here we're going to build a new header over here you can notice a global header this is the one that we've built over here and I'm just gonna recreate it within a new template so I have a landing page set up with the default navigation and that is used within Divi right off the bat and I'm gonna replace it with a custom build header by clicking on add custom header and I'll click on build custom header over here you get three options you can start building from chocolate scratch choose a premade layout or clone an existing page we'll build everything from scratch by clicking on the blue item over here and as you can notice we already have a section within our page now the first step to creating this beautiful slide and header is modifying the section settings so I'm gonna open these settings and an important part of making sure that there's no bar really over here is me using a completely transparent background color so to do that just remove all transparent all color over here by setting the transparency to zero and that will just help us make sure that everything below these section shows up next I'm going to go to the spacing settings over here and I'm going to use some Nick not negative but zero pixels for the top and bottom padding options and this will remove the default container space for the padding that's in a section so instead of using top and bottom padding we'll add zero pixels to both options and then we'll go to the Advanced tab and in the position settings we'll make sure that the entire section stays fixed to the top of the page by using a fixed position so I'll just select fixed over here and I'm also going to select top center this will just make sure that the section is centered although the width of our section is already 100% it just helps if you're modifying the weather or anything like that so next up we're going to add our first row and we'll need two rows in total the first row will contain our logo and our hamburger icon so to create that we'll need a column structure with three columns and this the one that I'm hovering right now so this one over here is the one that we're picking let me just show it once again over here so this is the one that we've selected and before adding any modules I'm gonna open the row settings go to the design tab go to the sizing settings and I'm going to increase the width through 97% let me just do that really quick over here and I'll also use a 100% max width and this will just help us and you know create a bigger size for our container so it's touching the size of the section container almost and greeting that you know full width experience next I'm gonna go to the spacing settings over here in the row settings and I'm just going to add a bit of top padding 1% to be exact and I'll remove the default bottom padding that's included within the row by adding zero pixels well up next I'm gonna go to the Advanced tab and over here within the main element of our row I'm gonna add two lines of CSS code now what these two lines of CSS code will do is it will help us align the column content between each other so that just means that everything's centered and it just takes two lines of CSS code it isn't really necessary because you can play around with spacing settings too but I just think it's a nice dipping trick to use within your rows if you want to automatically Mae that centering happen so the first line is display flex and then the second one is a line items center alright and now we can start adding the modules so in this first row we're going to need two modules in the first column of the row we'll need an image module and this is going to represent our logo so you can upload any logo of your choice let me just grab one really quick over here in my media library and then I'll go to the third column and over here I'm going to add a text module now this text module will represent our hamburger icon which is actually not in the inmense it's actually made out of Spence so let me just grab those fans and you can grab these in the blog post which you can if you buy a going to the description and going to the blog post and there you can find these spins as well but you can read them off the screen as well so I'll just switch over to the text tab over here and I'll add the Spence so you can notice three over here and they all have the class line and then line one for the first one line two for the second one and line three for the third one now the reason why we're using Spence is to create this kind of animation I'll click so if I click it it turns into an X and it goes back just like that and just using Spence allows us to style them with CSS and then transform them all click which is really easy alright so next I'm gonna add a background color to this text module so you can notice that over here as well we're using a background color let me grab the color code really quick and then I'll go to the text settings and over here it is important for you to set the line height to zero this will just help us give us that flexible approach to styling the different spans because if you use text line height there will be some difference between the different spans that you are not able to control within the code that you add afterwards so I recommend putting that to zero then we'll go to the sizing settings and we're going to slightly shrink the size of our module to 120 pixels and we'll also use a write module alignment now in the spacing settings we're going to give this a kind of square look and field by adding some custom batting values so we're using 40 pixels for the top option 60 pixels for the bottom option and 40 pixels for the left and the right side alright so this is our first role just check the comment section really quick to see if you guys are following along so uncle's social says I wish the value of the default padding wasn't hidden I want to know what it is before you set it to zero hopefully they change that part of the interface in a future update the reason to why there's default padding is because it's linked to the theme customizer so if you want to remove that default padding throughout your entire website you can do that within the theme customizer I think it's in the layout settings so you can automatically set the height of your section I think it is 2-0 and it will remove that and you can add it manually afterwards so it's kind of a side wide preference that most people go with so as soon as they add an element it has kind of some decent space going on at the top and the bottom it doesn't look like it's pressing against each other but I totally get it it's a valid point that you're making alright let's continue so onto our next row so right now obviously you cannot see the hamburger icon but later on it will be added and before we get to that we're going to need a new row now this row will be entirely dedicated to our side menu and we're going to use a one column only so this entire row is going to be our side menu I'm going to open these settings of my row and go to the background settings and I'm going to change the background color let me just grab that color code really quick here we go so this matches the yoga instructor layout back really well and we're also using a pattern background so you can find this in the download folder in the blog post so you can download this layout so this template for free along with the background pattern so this background pattern is part of the yoga instructor layout bag and I've just reused it within this tutorial now over here you will need to modify these settings so you'll use actual size for the background image size and center for the background image position we're going to repeat the background image and this will just create a pattern with a small image and it looks really good alright so next we'll move on to the sizing settings and over here I'm going to enable use custom gutter with and put this to wine this will just remove all space between modules which is usually in pixels we want to control it ourselves using VW so it matches the different screen sizes so that's my room where we're moving the gutter with and over here in the width this is also a very important part we're going to make sure that the site menu is responsive now on desktop that means 20% is enough but on smaller screen sizes we'll need to increase the percentage we'll use 40 percent on tablet and 60 percent on phone and we're also going to set the height to 100 VH this will just mean that the side menu will take up the entire height of your screen size whether it is on desktop desktop or tablet or whatever it will always be the height of your screen size giving it this nice sliding full height effects and then we'll go to the spacing settings over here and we'll use some top batting now this top padding that we'll add will create some space between the top of the side sliding menu and the content that we'll add later on so this is also modified to different screen sizes let me just enable the mobile option over here on desktop we're using 10 V W on tablet we're using 30 V W and 48 V W on phone and we'll also add a border so a left border you can definitely see that in the preview here as well and we just show it again we have this left border really subtle but it helps differentiate the slide in menu from the page contents you can use a box shadow it's all it's also often used to create a difference between both and I'll just use 10 pixels let me grab the color code for that really quick so this is the color code that we're using Matt's just filling up Excel and we'll use a double border style over here now that we have the container in place we can add the elements that we want to show up in our slide in menu now to add the elements you don't need any widget or sidebars or anything like that you can just use text modules if you're using this as a global header it will just mean that it shows up everywhere and the links will be correct anyways so you have this kind of design freedom I would say to do whatever you want style it however you want and just add the link of your choice instead of adding it to the theme customizer for instance like just create a separate menu you can just do that over here have one there as well but just customize all of the modules here to match your design needs all right so I'll just add some content of my choice and over here it is important to link it to the correct page of course so definitely make sure that you do that and I'm going to modify the background colors so we're using a semi-transparent background color which is the following one so you can read it off the screen but again you can find all of the steps in the blog post which is listed below in the description of this video and then I'll go to the design tab and I'll modify the text settings so as you'll notice throughout this tutorial we're using VW a lot and that is just to make sure that it matches all screen sizes VW is excellent VW for those who don't don't know VW means viewport width so it takes one percent of your viewport width and fine-tunes it that way so no matter what kind of screen size you're dealing with it will adjusted and then we'll go to the spacing setting so okay over here to text phone is Domon text font weight is bold a black text color 1vw on desktop 2vw on tablet 3pw on phone cuz i forgot to mention that and then I'll go to the spacing settings over here and we're going to give our module some space to breathe using custom margin and padding values here we go so on desktop we're using one PW for the bottom margin 2vw for tablet and three VW for foam and we're using one PW for the top and bottom padding across all screen sizes now once you have your first text module in place or your menu item you can clone this up to as many times as you want just make sure that it fits the viewport height of whatever browser you're using so over here let's just take the fly for instance and then of course you'll go ahead and modify all of the content so you can place about here and blog and contact and more and also make sure that you change the links accordingly now the last thing rule out over here is a button module but you're really free to add whatever you want if you want to play social media icons in there you can use DB social media follow module you can tweak this design however you want because the important part will follow next where we just make sure that this entire row appears as a slide and once someone clicks the hamburger icon over here I'm going to modify the button alignment to Center as I've done make sure that you add a link here as well in your button settings to a CTA of your choice and then I'm gonna modify the button settings when you grab those really quick so these are the settings that we're using we're using 0.7 VW for the text size on desktop 1.5 PW on tablet and 2.5 VW on the phone but again you can find all of these steps in the blog post and you can copy all of the color codes there as well we're using a black text color a white background color actually completely transpired as transparent as well so you can fine tune this however you want but we're just sticking to you the yoga instructor layout back and making it completely transparent we're also using two pixels for the border width along with a border color which is a following one we're using zero pixels for the border radius so we're removing it entirely four pixels for the button letter spacing opens for the bottom font both for the bottom font weight and we're also enabling uppercase and then we'll go to the spacing settings and again here we're going to modify the values according to different screen sizes using VW as our unit to make sure that everything it remains responsive so we're using v VW for the sample margin and then on that Saab 1 VW for top and bottom 1.8 VW for left and right and we'll tweak these values across different screen sizes so 2 VW for top and bottom on tablet 3pw for the left on the right side and 3 VW for the top and the bottom on the phone and for VW for the left and right side on phone alright so far we're doing really good I'm just gonna check on the comment section and in the next part we'll make the magic happen may I see people are still joining em are you guys ready for the last sports and to make this tutorial complete and have a beautiful sliding menu that you can use on all kind of websites and customized however you all right let's get to it now the first thing we're going to do over here is open the row settings of our second row so not the first a second and we'll assign a custom CSS class the one we're using in the code and over here is slide in menu container so you can read it off the screen or find it in the blog post and then we'll also reposition the entire row in the position settings so what we'll do is we'll select absolute for the position and place it in the top right corner now over here it doesn't seem like it's overlapping but on your website it definitely will now in the horizontal offset option over here we're going to place the row on the right size so we can create a kind of sliding effect so we'll use a negative value for this now this will be different across different screen sizes and it will match the width of your row now over here in the sizing settings if I go back in it is 20% for desktop 40% for tablet and 60% for phone now we'll take those exact values but add a minus in front of it so minus 20% on desktop minus 40% on tablet and you can see it over here it's still appearing and as soon as we modify it to the proper value it goes away this just helps us assure that the sliding menu doesn't overlap any existing content on our page and we'll also remove the opacity to create this kind of fading in and out of it you can definitely notice it over here by adding a line of CSS code it says opacity 0 now we'll also need to add another CSS property so a CSS ID to the text module in the first row so and the third column of our first row so this is going to basically be the trigger of our code and as soon as someone clicks it a click function in jQuery will happen which will reposition the row that we've created so the second row that we've created put it in place and increase the opacity now the CSS ID we need is slight in open you can modify these CSS ID these and classes as long as you modify them in the code afterwards as well all right now the only thing left to do is add our code now I'm gonna place a code module in the second column of my row just simply because I don't have anything there and it doesn't show up anyway you can place it anywhere you want but this seems like a good place to place it in and I'll first add my CSS code and it's important for you to add it between style tags as you can notice over here over here I'm chasing I'm changing the cursor into pointers so over here if I hover this you can see a pointer instead of something else like usually it's a selector I don't know what other options are out there and over here we're also styling the Spence so you can already see it show up here we have our hamburger icon we're styling them and we're customizing the style of the second and the third span same goes for once it's open we'll reposition it using a top value and will also rotate it the second one will disappear over here if I click it you can see that we only have two and that's because the second one has disappeared once you click on it and we'll also remove over here this is important so as soon as someone clicks the second container will remove that negative percentage across different screen sizes so the right value will be zero again and the opacity will be brought up back to one it's kind of hard to explain code right but I hope you guys get it somehow and we'll also use some jQuery code so the jQuery code is really minimal we'll just use one function which is a click function I definitely if you're just starting out or if you are already proficient with may be I definitely recommend looking into a few basic jQuery functions so you can make all kinds of things happen and it's definitely fun to do as well I would say so over here we have one function so as soon so this is slide and open equals the hamburger icon so as soon as someone clicks on it it will toggle the class called open which we've interpreted here in in our code it will just change the hamburger icon and it will also toggle the class slide in menu for the second row that we've added which means that it will bring the right back to zero and the opacity to one so far my code and I'm gonna save this and exit the visual builder over here make sure that once you've done creating anything within the theme builder that you say the theme builder changes as well let me refresh this so if I click it my side menu appears and it disappears again really cool isn't it I was just going to take one final look at the comment section to see if there are any questions that's almost asking hi Donny it can you explain the best use for if you double your percentage to get the bed result for responsiveness yeah honestly in the past it's really it really depends on your use case and I'm sure that all of you hear that a lot that it really depends on what you're creating and that's because it actually does and for instance VW makes a lot of sense if if you're designing something that's full screen or full width and you want everything to stay exactly the same where for instance in this particular example we just wanted to make sure that the elements shrink according to the screen size so we don't exceed a certain height now percentage I think comes in really handy when you're limited to a certain container so say for instance a column container if you're using spacing for a column you'll usually use percentage the reason for that is that it will also automatically modify itself across different screen sizes but based on the container itself if that makes sense I hope it made sense yeah so yeah it's usually based on the container you're using I personally go for VW when I'm trying to create something fullscreen or a full height and I use percentage if I'm still using pixels by the way like for text and stuff like that if I'm still using pixels but I just want to make sure that the padding is kind of similar across different screen sizes then I'll use percentage instead all right someone's asking but a mobile menu the text alignment is not working for mobile and tablet please guide van Hall just solved a but what exactly do you mean let me just check if it's Center aligned here so I don't have any problems over here yeah maybe a specific use case where I could understand a bit better and uncle socialists mentioning one of Jason's post a guy to understanding and applying CSS length units and they definitely recommend let me just search it and paste it away over there so you guys can check it out Jason does a great job at explaining how the different units work what I just explained like my use cases and how I use it it's purely based on personal experience because you know it definitely depends on what kind of situation you're in okay I got it let me just copy and paste it over here on Facebook and on YouTube here's Jason's post well seems like there aren't any more questions so that was it for this tutorial if you liked it please give it a thumbs up and we hope that you're enjoying this ongoing TV design initiative where we try to put something extra into your design toolbox each and every week make sure to check back with us next week for another use case livestream and see you next time you

Channel: Elegant Themes

Views: 22,253

Keywords:

Id: lkdr0l7Ay28

Length: 33min 57sec (2037 seconds)

Published: Tue Apr 14 2020