what is up guys I'm URI Lesotho and in this video I'm gonna be showing you guys how to make a mobile header menu in Elementor so let's dive right into this so let me just go over the basic things that you're gonna need first of all you're gonna be you're gonna have to you're gonna need a theme installed which I would highly suggest using the Hello theme it's what I use for a lot of my websites it's very lightweight and fast the plugins that you're gonna need are our element or element or header footer and block element or kit light ullscreen menu for element or sticky header effects for element or I'll have these also in the description down below as well so and I'm sure most of you already created your your bed new as well so just make sure that you already have that set up so there's two ways of doing this we can eat where we can do it with element elements kit and with header and footer app builder so I'm gonna be showing you guys how to do this with both I'm gonna be starting off with with element kit because it is fairly new so they're they're both very similar and they both do pretty much the same thing obviously this one has some other features as well but the main one that we're focusing on is a header footer section that it allows you to do so as you can tell you're able to make a header footer and a section and and with the header footer builder plug-in you're able to do pretty much the same thing as well you can click adding you you can create a header footer custom block which is basically a section so but like I said we're gonna start off with elements kit so go ahead and go into my templates you're gonna click on add new you're gonna create you're gonna call it whatever you want to call it um you're gonna make this into a header and we want this for the entire website I know that some of you have asked in the past how do you actually add it to just one specific page well I'm gonna show you how to do that at the end of this video there is there is another there is a lot of ways to do it um the first one is just having having the pro version of Elementor you could easily do it with that and then there's other plugins as well but since I am showing you guys how to how to make a mobile menu for free Warnock be purchasing any of those plugins so just make sure that you click activate and click Save Changes and then once you click the Save Changes go back and then click Edit content and then this will dive right into the Elementor okay so we're gonna want to create a section now we do have to create a mobile oops let me actually be pretty of these we do actually have to create the desktop version first to even go into the mobile version so I'm just gonna I'm just gonna add some basic stuff in here that we need which is just gonna be the logo and the menu I do I do have I do have other videos where I go over on how to where I go over creating a a header menu on the desktop so if you if you do need that if you didn't do need to know how to do that and you can just go ahead and watch those other videos this one is just something more detailed just because I know that a lot of you have been having issues creating a mobile menu and I just want to show you guys some like really cool ways on on actually creating those so let's go ahead and add our menu I'm gonna use this one that's just the nav menu here I'm going to select the menu what this probably you know what that's fine we'll just we'll just worry about that in the mobile version so let's just focus on mobile because that is pretty much our main thing here so let's go ahead and add our logo I'm gonna be showing you guys two ways on doing this as well with the within creating an actual hamburger bar or hamburger menu met and add menu whatever you want to call it so let's go ahead and actually make this eight about eighty and then let's shrink this make sure this is on on the left side and let's shrink this logo to about that and then let's make this twenty probably have this in the middle okay now we definitely want to have a different color or for this hover so let's go ahead and change that here so that would be go ahead and find that I'll be over here I'm Rieger yep you'll be here in hamburger under head under hover okay so a hamburger icon color you see if I can maybe change to something else here let's do you know what I'm gonna do blue I know that I know that you guys probably have a specific color that you want to make your hover which would G which would just be the color that you guys use for your guys's website oh that's a very ugly color but we're but this is just an example guys make this why there we go okay so that works there then we kind of I would kind of want to make this a sticky header so let's go ahead and actually go into advance going to stick sticky header and right now we're just gonna be focusing on mobile okay so let's go ahead and save that you and then we want to view this be here the others works and more war okay but you know what what I want to do guys really really quick so we could just really see how how this menu actually looks like with a layout let's just add a just add a template here really fast to up to my home page you so I'm just gonna do anything any any anything here or any template that I think might go with this probably just one that has I have something here we go with them you it was some time to load make sure we select the right steam for it Elementor full width you save this chain it's gonna remove this but a homepage do the part that were mainly focusing on which is just going to be this here actually move out there now we need to kind of fix up this area there now the issue is right now is I'm not seeing there's no sticky which is kind of odd and I think it's because we're not actually on my phone we're not actually on the phone but let's let's see what's going on here okay so it's best used with Elementor pro but it should be able to work regardless you okay we can focus on the sticky a little bit later because that's just kind of a bonus so let's go ahead and actually let's go and actually work with this menu here so we need a we need to add a logo here first of all so let's go ahead and add our logo in there now whenever we click on this as you can tell there's our logo there we can either have this in the center a I honestly didn't really make a difference to be honest okay let's see let's see if I can make the logo a little bit bigger on the menu sometimes that sometimes these plugins are very loose um they can be very limited on things that you can do so yeah that might just be the case no from the looks of it they might not have that option but I'm sure if they do maybe you guys can find it in there okay now let's say we want to add a search as well on here go here here and find a search the good part about the elements kits is that it does come with some really nice some really nice like extensions so this one right here is as you can tell the search and look how cool the search is like this widgets is really really awesome so it's probably make this about 20 as well and then we're just gonna have to remove 20 off of here and that would just be 60 so we clearly don't want that color because our color doesn't really go with the website so let's see if they okay there we go all right so let's uh make this black oh not this one it's not that one who's probably this one here we go all right so let's make that black there to heaven nope that's fine that actually goes I honestly really like this sir cause I'm gonna probably start using it on on some of my other websites good and make the shoes on them in the middle and let's go ahead and view this I look at that I know that this would probably be the active color which we can remove as well now this is probably a little odd right I mean you're probably looking at this and it's like shouldn't this be a little bit closer to the to the actual hamburger little menu here so what we're gonna do is this now in May it may look different when you do that but on your phone I can't really show you how it's gonna look like on your phone you're just gonna have to test it out and really um um make sure you get the right sizing for it but the first thing that you that I like to do is first of all just I would I would honestly what I've done in the past is I just do no gaps just to make it as slim as possible and then we can just go ahead and start adding some padding to this so you can add it from the top maybe five to five to the top oops up to the bottom honestly this one isn't necessary for me right now I'm just gonna remove it because it's just it's honestly really bothering me so we can move this too left actually let's try to move this to the left see if they have two deaths they do have the option for it so that's great I can move it to the left a little more if I need to and then what I'm gonna do for this one is move this one move this menu to the to the this menu to the left if I said if I've said the left I meant the right so let's see if I can do that if now we're just gonna have to do this old-fashioned way um apparently 30 actually we add them with this one yet we move this one to the right which doesn't really seem to make a difference right that's weird it's going to do this again you okay so what I would do here in the like this is I would just add some padding to this probably start from the right and just try to move it as much as possible bad part about these free plugins is that they always have these little bugs that you have to deal with since they are free we just kind of have to deal with those things but um I'll just show you how to fix those those those issues so I think it's good where it's at right now what I would actually do now is try to see if I can move this one here see apparently okay so I can move this a little more right there let's go and see all that looks like I said this might look different on your on your phone as well so make sure you just test it out and you can test it out in various sizes as well by using this plugin which I think this I'll show you what this plugin that like you looks pretty good there um so this this Chrome extension I actually forgot the name of it let me see if I could find the name of it here okay Chrome extension see I'm not sure if it's this this is something very large um you know what guys I'll have a link to it in the description as well because I don't know the exact name of this out Chrome extension but I'm sure a lot of you guys are probably wondering I know that you can view it how it looks like on here but realistically sometimes it's not it's not really how it looks like so at least from one from what I've been able to notice is that sometimes it's not that's not what it looks like but I'm you can just tinker around with this just depending on how how it's it's looking on your phone that's the part I would probably focus on the most and just trying different different sizes as well because I could try this size you know I could try the iPhone 5 iPhone 6 iPad right so this already looks pretty good to me let's just go to the home page and let's see how it looks there so yeah this already looks um doesn't look bad to me looks like a regular menu so oh okay there we go so now now the sticky header is actually working now which is awesome so what I would actually like to do now is make sure that the background as you can tell is is a solid white so transparent header let's go background header and let's make this one a white and now let's go ahead and shrink this and let's let's go to the home page okay definitely a lot better as you can tell it is it is a completely white I'm really liking how this came out actually so yeah this looks really cool on I feel like this menu is is even better than the been of them than the menu that they have for the pro version I definitely am really liking this on this little popup here but you can also create a custom one with the pop-ups and element to a pro but that's if you have that element of pro version so let's go ahead and I see if we can remove those colors there they're probably going to be I've active colors I know that you if not that's fine it's it's fine yeah I'm sure you guys can probably find and find a way to remove those colors a color that I'm talking about is pretty much the this color right here that color and this color so I'm sure you guys can find a way to remove that if not then I'm just let me know let me see here if I could just they should have an option for it but like I said sometimes since these plugins are free they're like very limited so okay we could actually be this one seems like it would be this one so no it's not that one either yeah it's definitely not that one okay yeah so yeah that is that right there is one way of creating your mobile menu all right so that looks good there all right so the other way would be to be to use just type in menu because by now you would have you would have already at you would have added the plug-in and it's it's it's called full screen menu for Elementor I think something like that that's what the plug-in is called and that plug-in literally just comes with this widget here so we're gonna go ahead and add that in there and just remove this one so this one is pretty cool I actually really like this as well this is pretty much just a simple pop-up of your menu so let's go and add a white background to this actually because as you can tell this is um just kind of transparent there so background color let's make this white okay probably want to make the text a little bit smaller be something like this you can change the font to whatever you want um if you wanted to have if you even wanted to have a different color or the background obviously you can you can have any sort of color if you wanted to even make this a little bit um transparent just so then people can also see I know that some websites have it so then you can also see you can still see the website background as well so we can do that as well and this one off the bat is is already good if you've been if you've been using my padding suggestions just by adding this right after that or just by even doing doing this way you know maybe you want to do this instead of the other menu you know this one can also work for you as well this one is definitely a lot a lot more simple or like I said we're only focusing on mobile so the desktop version is probably not gonna look that great look at that look how look how awesome that looks so let's let's go to it let's go to the homepage here and just look at this this menu is like really cool now you can click on here you know if you want to make this a little bit more um I guess less transparents so then you can see the text better and not the background that you can go ahead and do that as well that would just be your preference there see okay so now that we have that set up on the last thing that I was gonna show you was pretty much how do how to actually display this mobile this mobile menu or you know what let's say you you want you want to have a different mobile menu type on on on a on a different page right you want the menu to UM to be different then this one so um the only way that I know right now to do it when you're on the free version is pretty much just adding it to the page and just creating and just making the entire page a canvas or false or pretty much yeah just creating it just like creating it as a canvas so you would do here go here and go to pages actually you know what something I honestly almost forgot I was actually gonna show you guys how to how to create the menu on in the header builder so let me go in there real quick and click add new it's pretty much a literally the same exact process guys so you're just going to click header we're going to click header there you're going to click Edit with element or okay and we're having an issue so I'm guessing we're having you're probably having an issue because the other plugin is most likely interfering with it so let's go ahead and and maybe disable it for now sable this but her builder sorry about almost forgetting there huh yeah oh no I guess I was wrong on maybe we might need to delete it altogether so it's good kids let's go to header/footer builder and if and you know what guys if this does not work for some reason yeah for some reason guys I don't know why this is not working for me but basically what you would do is just click with element or click with edit with element or what you would do is basically grab the menu that we just created copy this go and go go in there once you click Elementor paste it and that's pretty much it and just save it and it should or it should already be working whatever whatever a plug-in you use whether you use on the header footer template or you use the elements kit so I'm pretty sure a lot of you guys probably use elements kids because that was the one that we started off with which is totally fine you can just use that one and sin instead so on that that and you know what that would probably help you guys out because then you can have you know you could just remove the other plugin you don't have to have both it's and to be honest um that Lipman's kits does come with some other widgets and they're also really cool as well so you guys can just go ahead and do that as well and then I think in my in my one of my other videos I actually did use a header footer builder so you can go ahead and just watch that video and see how I did it there regardless and then just use that same process that I just showed you for some odd reason it's not working so yeah sometimes like I said with these free plugins I'm you really just don't know so um let's go ahead and go in here run to my templates and I'm just gonna I'm going to reactivate that and then I'm gonna show you guys how you guys can um and add a menu pretty much on on on any page sorry a different menu on any page basically so let's go and just create a new page here and let's call this one about page publish okay and obviously as you can tell we already have our our menu here right Donna I know it would probably look horrible to you but we were only focusing on the mobile version so what you would do right now is just just add your your design in here whatever that may be I'm just gonna add this one just because I don't want to be I don't want to use the same a template that I used that I used last time okay so what we're gonna do is make this into into a canvas which will pretty much just make the entire thing fullscreen like it will basically just removed the header and and footer so what you would need to do is just add your different theme on here pretty much just you know grab it click copy and paste or you can just design it on here if if you need to so let's say this one's for some odd reason I don't know some there's there's times where we just have a a different menu where it's a different logo and then the background the background is uh is black right or something like that you know and then you would basically just add your your footer here whether it's going to be a different footer and then pretty much it guys that's the only option right now is you just have to do it within the actual page itself so yeah and as you can tell on its gonna do this in you know and the mobile version there if we go to the home page you probably see that there'd be a different menu so that's how I would kind of go about doing it let me go back into the header here and show you guys one more thing because I remember one of you guys asked me you're like how do I do how do you separate these so let's say that you want your header your desktop menu to look different to look a little way different than your than your mobile menu and they're just not configuring right for some first for some odd reason uh the responsiveness you you can't get the responsiveness right you know or for instance for this one right because this one only gives you the mobile menu it doesn't give you a regular menu right so let's just let's duplicate this one and actually sorry let's yeah look at this one let's duplicate this one this one is going to be our mobile menu and we can go to responsive make this mobile this one is going to be our tablet section so go ahead and actually make this oops good and um optimize this a bit here I'm just gonna do this very very quick guys so yeah so let me click on this here oops Center like I said these plugins aren't perfect sometimes so yeah it's definitely not gonna do that so what I would probably do is just make this Navy you know I don't know just make that 20 so you actually you know what let's make this ten like this at least ten we're not we're not gonna need this because this is our actually you know what yeah this is going to be our tablet menu so this is just something that I want to do very quick I don't you don't want to take that much of your time on this as well and No just move out there make 70% oops not 70 probably 60% more 50% there we go that will be the tablet version so now as you can tell the visibility is pretty much we're heading it on desktop and we're heading it on mobile now the last one would be the desktop version so let's go ahead and go into the desktop version anything here we'd probably end up losing this I'll be like this don't worry about the background sure the background we can remove that if anything you I'm not really sure if it's fat or if it's Jessica I might just be glitching out so I'm gonna make sure that we hide this on mobile hide this on tablet and show on um on desktop like I said guys this is just showing you guys the the responsiveness I'm not gonna completely optimize these I'm sure you guys can probably watch my other videos where I show you guys how to I don't wanna mais um every menu so it all looks really good which is just kind of messing around with um with uh with actual padding but that would be pretty much how you how you make sure that every every every actually platform whether it's you know mobile tablet or desktop has a separate specific header just in case you guys didn't know but if you guys did then you guys probably aren't watching this part but yeah thanks for watching guys if you guys have any questions feel free to ask me down in the comment sections um and if you guys want any more videos like this we'll just make sure to subscribe so then you you end up seeing those later on .
🤑 How To Make A Website Under $35 And Sale For Over $2,000 (Free Masterclass):
😎 Join Our Free Facebook Group – Websites & Sales
PRODUCTS I USE FOR MY WEBSITES ⤵️
🔥 My Hosting Provider – Try Siteground [Save 40%]
Welcome back! In this video, I show you how to make a mobile header in Elementor with WordPress.
P.S Sorry for the cam video delay!
Subscribe to my channel for more Elementor tutorials!
-Elementor – Header, Footer & Blocks
-Full Screen Menu for Elementor
-Sticky Header Effects for Elementor
Connect With Me On Other Platforms: