what is up guys i'm yuri soto and in this video i'm gonna be showing you guys how to make a mobile header using elementor now this header is actually really responsive so let me go ahead and show you guys how it's gonna look so i'm gonna go ahead and click on inspect here and i'm just going to adjust the sizing of this and as you can tell from each it goes from desktop to tablet to mobile and it's all very responsive so if you guys want to learn how to make this mobile header menu go ahead and stick around so let's begin now for the purpose of this video i'm going to go ahead and create my header from scratch so head over to your dashboard go into templates and theme builder and then go ahead and click on add new and then select header and you can either type in header or mobile header since i'm going to be focusing more on the mobile header i'm just going to leave it as is and then i'm going to go ahead and exit out of this i'm not really going to choose any of the templates that they already have pre-built but you guys can go ahead and choose that as a starting point but that's up to you or you can just follow along when i create my header from scratch here so go ahead and select a section here and i'm gonna go ahead and choose three columns and the reason being is i'm gonna have my logo to the left my menu in the middle and a call to action on the right or a card so right now i'm gonna go ahead and add my site logo now my site logo is already set so if you don't know how to add your site logo here and you what you want to do is head over to your um to your front end and go ahead and click on customize now my i am using the cadent theme so my my uh might look a little bit different than yours so the way you want to go ahead and find it is you want to look for site identity so i know that mine is in the header and logo here i just got to click on that and then it takes me to site identity but whatever theme you're using whenever you click on customize you should be able to find site identity somewhere so i'm going to go ahead and change my logo i can change it to whatever i want but you know what i'm gonna actually just leave it as is for now and i'm gonna go ahead and click on skip cropping and and it's already published so now that's all set up there but if you want you can also just add an image instead and then you can just go ahead and select your um logo for your website but i would highly suggest you add a custom link and direct them to the home page but just for the purpose of this video i'm going to go ahead and use a my site logo okay so now i'm going to go ahead and grab a menu here so i'm going to type in nav and i'm going to grab the nav menu um from elementor and that's just the default nav menu and now i'm going to move this over here just kind of give it some spacing here and i'm gonna go ahead and move this here and i'm not really gonna go over um the styling of the desktop menu i'm gonna just kind of go more over the the mobile menu here so i'm gonna go ahead and just shift this to the right here and that's just my preference and then i'm gonna go ahead and add a call to action and that can either be a button or anything like that but on mobile you really don't want to have buttons buttons are just too large to have on your header at least on mobile but on your desktop you can definitely have a button but i'm going to go ahead and add a cart actually and i'm just gonna use a default um cart from elementor and i'm gonna go ahead and click on my column here and i'm gonna make sure that's set to the middle and i'm going to click on this widget here and i'm going to set this to the right and then i'm going to go ahead and do a i'm going to remove the subtotal so that we only have the icon and then i'm going to definitely do bubble and let's see here we can have a car i would honestly you can have a cart solid i know that it's kind of glitching out right now but i'm going to go ahead and save this and just um do this i know that it's kind of a square but it is it is actually glitching out but that tends to happen sometimes with elementor so i'm going to go ahead and it will probably end up working here in a bit but i'm going to remove this border here because i don't want to border on this at all and i'm going to leave that as is and i'm going to scoot this over about to here that's fine and then i'm going to go ahead and add a um a section at the top here and that could just have some basic information and i'm gonna make this about two columns and over here i'm gonna go ahead and type in list and i'm just going to grab an icon list and then i'm going to go ahead and click on my layout to inline just so then it all fits and i'm going to go ahead and remove some columns and i'm just going to add some basic um basic information here and this is just usually contact information so the first thing that i'm going to do is probably just add in an email so i'm going to type in envelope and then i'm going to go ahead and choose this one here and then i'm going to go ahead and just type in the email i'm going to put um email at my website.com and then i'm going to go ahead and add a number here so i'm going to go ahead and choose a phone so you can either type in phone you can choose this or you can even type in mobile phone which i think pops up as well you can even choose a mobile phone i'm going to go ahead and just choose a mobile phone there and then i'm going to go ahead and set this so i'm just going to add a random number here now if you are wondering how to link these um so for your email you you would do email to and then you would go ahead and go ahead and grab your email here and then paste that in there and sorry you have to put those dashes in there so make sure you have those dashes in between email to and in your email and then for your number here go ahead and type in tell then dash dash is there and then go ahead and just uh type in your number but you don't want any any periods or dots in between your number you just want it just like this and now it's going to be clickable so let me just go ahead and stylize this a bit but before i do that i'm going to go ahead and just choose a background color for this i'm thinking of just something really light gray so something really great or we can even have this black actually black might work but i want to go ahead and use this color black i'm not sure if it's the same color i'm going to attach a different color black so i'm going to go ahead and grab this color black and i'm going to paste it down there make sure that it's that color there there we go and then i'm gonna go ahead now that i now that i have the right color there now i'm gonna actually customize my um contact information so i'm gonna go ahead and go to go to style and then icon and then i'm going to choose a color here i'm going to make that white so that's viewable and then i'm going to make the text white as well but i don't want it that um that viewable so i'm just going to bring this down here and kind of make a little bit gray and what i can do as well is i can also make my icon colors blue i can make that blue if i want but i think it's more viewable when it's actually white and i'm going to grab this gray here and i'm going to go ahead and save this and let me just make sure that's saved actually sometimes this can glitch out here so i'm going to make sure it's saved there we go and i'm going to go ahead and delete this one and i'm going to choose this gray here and then let me go ahead and make this icon white all right and now we're just going to go ahead and add some social some social icons here so just go and type in social and you'll see this um social icons so just drag that to the column on the right and then alignment should be from the right and then we're gonna go ahead and just start stylizing those so click on style click on custom and then your primary color okay which i believe is a background we're gonna make that one transparent so go ahead and click on your primary color and just bring that all the way down and just to the point where you just have the icons and then we're just going to adjust the sizing here and maybe a little more okay now like i said i'm just i'm not really going to focus too much on um on the on the desktop version i'm going to focus more on the mobile i just wanted i just wanted to have a base to work with so i'm actually going to adjust the color of this actually real quick i'm going to remove the underline and then i'm gonna go ahead and make um let me go ahead and grab this black here i actually want to use black and then i'm gonna go into style here and i'm going to go ahead and just adjust my text color here and make sure i don't have a hover effect on here there we go all right i just want to save that there okay so now let's go ahead and focus on the mobile part which is the part that's the most important um so i'm gonna go ahead and first just focus on the tablet here real quick so what i'm gonna do from here is as you can tell our logo here is uh in my opinion it's um really close to the edge and my um cart here is really close to the edge as well so i'm going to go ahead and click on my section here and then i'm going to go to advanced and then from my padding i'm going to go ahead and move this logo here to the left left to the left here sorry let me go ahead and there we go i'm going to move that to the left and let's see i think about 15 is fine and the same thing i'm going to do to the right as well so we can move that over but um this this cart here is a little bit glitched out and that does tend to happen with this car i noticed that the elementor cart icon isn't really the best but um it might be working for you just might be on my my version right now so i might move that a little more to the left actually so i'm gonna go to click on the section and then i'm gonna sorry i'm going to move that more to the right i mean all right so it's over about this okay so now from here i want to go ahead and shift this icon um this hamburger icon to the right i'm going to click on this icon here the hamburger icon widget which is your nav menu and then i'm going to go ahead and up here where it says toggle align go ahead and switch this to the right so now it's to the right but we have an issue here whenever we click on this it expands our entire header i don't want it to do that that kind of doesn't look good i want it to just be full width so now now that we've um now that we've checked this yes as you can tell now it's full width and now that's perfect now that's looking good there now what i want to do is just adjust the icon and then after that i will watch just a drop down so make sure your um you click on your nav menu and you go to your style and then we're gonna go ahead and work on our toggle toggle button and then i'm gonna go ahead and make this um black i'm gonna use that same block that i was using and then i'm to make the color of my icon here now my icon um isn't really working that well but it does tend to glitch out like that but i think it will work later on so i know that it does kind of have this um they look like three bullet points there but that that just tends to happen sometimes it took glitch with elementor but don't worry about that it'll probably look great on yours if you guys are having any issues on that just let me know you might just have to refresh your your catch or clear your catch on your website that kind of sometimes tends to be the issue so anyway i'm gonna adjust the sizing as you could tell i just did so i was adjusting the sizing of that um and then i'm gonna probably no i think the car is good where it's at i think that's good and then now what i'm gonna do is i'm gonna go ahead and work on my drop down i'm gonna go and click on my drop down so i know what i'm working on and then i'm gonna make i think the color of it the color of the background of this drop down is fine to be honest um and then i'm gonna make the hover effect here i'm gonna make that i'm gonna actually use the black that i've been using but you can choose any color here but i'm just gonna go ahead and choose that black i think that's fine i think that looks great now what you are able to do here is on alignment you can move that to the center as well now that is a preference actually that actually does not look that bad so i might have it just like that okay and then i'm gonna go back to style and then i'm gonna go to my um i'm gonna go to my drop down now this part's very important your distance so this is basically the distance of your um drop down so you can move that all the way down you can tell it moves right but obviously it's far from um your header there so we want it pretty close to our header and we can see where it's at right now you can see that right there it goes right above our uh hamburger icon i'm going to bring it down a little more and i think i'll be fine there and maybe a little more there we go okay so now and i want to adjust this above as well so as you you guys can remember i did 15 to each side for this section i'm going to do the same thing for this section above so i'm going to click on the section go to advanced and then from the padding from the right and left i'm going to do 15. now of course that might bring one of them down not to worry though so what we're gonna do here is we're just gonna have to shrink one of these and actually what i'm gonna do is shrink this one here so you can go ahead and move this over here and move it about out to this size actually that's fine and then go ahead and click on this section here and now we just need to adjust the column width and we just need to make that one a lot longer give that one a lot more room now we can just move this over here and give it the same spacing there we go okay now that's perfect there that's all looking great now i'm going to go ahead and click update again and i'm going to save that i'm not going to view this yet i'm going to do this a little after and then i'm going to maybe touch it up and correct some things so now i'm going to go ahead and um work on the mobile portion of it so now what we're going to do here is i'm going to go ahead and work on our top section so i'm going to make this section here or this extension i'm going to make this go to the center so i'm going to go to style so just click on this extension on this extension there or the sorry this element and then go into your your style and then go into alignment and you can center that which is just centering the icon but that's entirely up to you and then i believe it's going to be in your uh let's see here right here it should be in your list so just center that and then that's going to get centered right there and then that's looking good and now i'm just going to center my social icons there so i'm going to go into content and alignment should be to the center and now that's looking great now you can have these side by side that is that is an option but it's not really going to look the best to be quite honest with you it's going to look very very uh clamped up together so it's not going to look good this is why i have it this way that's my preference but that's that's entirely up to you if you if you only have one of these on here you can try that if you just have um one list on here but what you can also do is just hide the social let's say you don't want the social icons on your mobile because it looks like it's you know too much going on at the top right so what you can do is go ahead and click on your column here go to advanced and then go to responsiveness and then just hide it on mobile now if i were to view this you can see now it's just set up to show my contact information which i kind of like that a lot better so i'm going to go ahead and just do that instead um but let me just show you guys what you can do as well now you can also shrink this as well and maybe try to make everything fit now you can do about maybe 60 here and then maybe shrink you can try to shrink on this text here now i'm just showing you guys an example here and i can just shrink this a little bit and then you can also go to your layout here from this section and then maybe do about 40 because i just did 60 on this side and then what you can do is just um sorry click on your icons and then go to your style and then you just want to adjust on the icon size so right here just adjust the sizing maybe make this a little bit smaller and then go ahead and click on your column and make sure this is set to the middle uh to the middle there and you can also have it like this now that is entirely up to you um this also looks great as well but it just might in my the text might not be that that big and people might not be able to read it so that's up to you guys there but i'm going to go ahead and just go back to how i had it there we go so now that's set up perfectly there now we just need to go ahead and fix this obviously this looks terrible um so we want to do from here is go ahead and move this logo to the left so let's go ahead and click on this um column here and i'm going to adjust the column width and i'm going to make it a certain side here now i don't know the exact size yet so i'm thinking i'm thinking actually smalling that looks that looks the logo looks really big so we might do we can do 20 you can even do 23 if you wanted to that actually isn't bad either but that it just depends on your logo size to be honest so you really have to adjust that i can't really tell you a set size because that always depends on your on how your logo is um so from here what i would do is i would go ahead and choose on this column here and then go ahead and make this a little smaller so just a column width and we want to just go ahead and keep moving that over probably about to this size let's go ahead and adjust my icon my cart icon first and then see what we can get so as you can tell it's still a little bit glitched out so i'm going to leave it about about 15 and then let's see how much more i can move this over here all right now what i'm going to do next is let's see i do want to shift this a little over i actually want to shift my icon a little bit over to my um sorry my hamburger icon a little bit over to my car icon so what you can do is you can go ahead and click on the your column here go to advanced and then go to actually yeah you can you can remove the padding on it and then you can also go to margin as well and then from the right side we can possibly let's see bring it down okay so actually you know what instead of doing it from the column do it from the actual um hamburger icon so go ahead and click on your nav menu here and then from here go into advanced and then go to your margin and then from the right side go ahead and just move this over here and that's pretty much to where you want it this is a good spacing already now let's go ahead and view this okay i think that's looking great now we might want to make sure this is all set to the middle so go ahead and click on your column here go to layout make sure that's set to the middle and make sure this is set to the middle as well just in case and then click update and now i'm going to have this on the entire website now i'm going to go to home okay so now i'm going to go ahead and view this on my mobile okay so now that's looking great here my drop down is looking great because we did set that up earlier so that's already looking good and it's pretty much the same way as we set it up on the tablet now what i'm going to do is i'm going to make sure that it's all really responsive okay so one thing that i want to show you guys that is very important just in case you're having issues is go into your dashboard go into elementor and go into i believe it's going to be settings or tools okay so it's in settings and then go to style so right here you're going to be able to um adjust your uh your responsive with and these are pretty much your break points so basically certain sizes of your screen they're going to turn into tablet and a certain size it's going to turn into mobile so by default it's sent it's already set up to 10.25 and and for mobile it's set to uh 768 so let's say for some reason because it does happen a lot when i'm building websites is a certain size doesn't look good like like um this menu here for instance will be too large and some stuff under it there'll be um there'll be other stuff under it and it and it kind of just and it kind of just breaks so you just need to adjust this properly let's say let's say instead you wanted you wanted to have the tablet version a little bit sooner because you're having issues with your menu and i'm sure that a lot of you guys have come across that if you've built plenty of websites before using the elementor header so maybe you want to adjust that you want to adjust and you'll be like okay well at this certain size i probably shouldn't have that um i probably should have it set to you know tablet so what you can do is just set the size right here to seven to eleven eleven eighty eight eleven eighty one so grab that and then maybe go into um your settings here and then just paste that in here and as you can tell if i were to save that and we were to um update this let me just move this a little bit over so pretty much anything past this is going to be tablet there you go so see that so that's why that's pretty important so this is about where your your mobile would be so this is already looking really good um okay here now that is pretty much it for this video guys if you do have any questions on um on anything really um involving elementor or uh wordpress or for having difficulty with this header um just feel free to reach out to me maybe comment down below and i'll definitely try to help you guys out um i will have a video coming out uh i think probably right after this video where where i go over um creating a sort of a stack like a sticky menu but pretty much what's gonna happen is whenever you scroll down you're going to get your sticky menu and also your logo here is going to shrink as well with your sticky menu and it's just a really cool feature that i'm going to be showing you guys how to do so you guys did enjoy this video and it did help you guys out make sure to like the video and subscribe to the channel it'll definitely um help us out a lot so as always um thanks for watching and i'll catch you guys in the next video .
???? 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%]
Learn how to create a mobile menu on Elementor Pro. Enjoy 🙂
Connect With Me On Other Platforms: