How To Build A Responsive Header On Elementor Pro 2021 | Mobile & Tablet

what's up guys i'm yurio soto and in this video i'm going to be teaching you how to create a header on elementor pro and you guys are really going to enjoy this one um i am going to be showing you how to create it on mobile and tablet so this is a header here that we're going to be building um it's all completely optimized and the really cool part that i wanted to show you guys is whenever we shrink this to a specific size you will see that our nav menu gets moved all the way down to the right side here at the end and that's a really really awesome feature that i that i started doing on my websites and i want to go ahead and share that with you guys so if you guys are currently doing that on your on your website you guys can definitely learn how to do that now if you don't have elementor pro don't worry um you can go ahead and use any plugins to create a a header i do have some videos on that for the free version you guys can just set that up and then just go ahead and do this the same thing that i do on the pro version but if you do not have the pro version i would highly suggest you get the pro version uh it's definitely gonna come with um your own theme builder pop-ups um templates step forms and everything that you're going to need to build a website and if you're definitely trying to scale your company and get a lot more clients it's definitely something that you're going to be using a lot so it is something that i highly suggest you getting now i do have some affiliate links down below so if you guys do want to support the channel you guys can definitely check those out and if you guys do end up enjoying this video make sure to squash a like button for the youtube algorithm and if you haven't subscribed make sure to do so so you don't miss out on any of my videos i do have a patreon so if you want to support the channel and support me as a creator i'll have that link somewhere around here so you guys can go ahead and view that now without further ado here's a video let's begin head over to your dashboard go into templates and then go to theme builder go ahead and click on add new and we're going to be creating a header here and then just go ahead and type in header or whatever you want to call it you can call it main header but i'm just going to call it header and then we're going to have some options to choose some of these templates i'm going to go ahead and just create it from scratch so then i'm going to go ahead and add a section and then within my section i want about three columns one of them is going to be for my logo the other one's going to be for my nav menu and then i'm going to have a cta which is a call to action button i'm going to have a button i'm going to go ahead and choose my uh three columns here then i'm just going to start to add my widgets or my elements so i'm going to go into my elements here and then i'm going to go ahead and choose my site logo which i have not set up but i'm going to and then i'm going to choose my nav menu i'm going to drag that into the middle then i'm going to go ahead and choose a button there we go i'm going to drag this over here to about the size here and i'm gonna drag this button over here to the side now i'm gonna go ahead and publish this and i'm just gonna save it i'm not gonna i'm not gonna go ahead and add it to any page yet and i'm going to go ahead and just add my logo to my website so in order to to do that we have to go to customize and then we have to go into site identity and go ahead and choose your logo here and i've already uploaded my logo so i'm going to go ahead and choose this one tycoon and now i'm going to go ahead and skip my cropping and there we have it i'm going to click publish and i'm going to go back to my um header builder and i'm going to go and refresh my page okay now we have our logo added there that's perfect alrighty so the first thing that i want to do is go ahead and adjust my nav menu i'm going to click on my nav menu here and i'm going to remove that that underline i don't really like the underline so under pointer i'm going to do none and then i'm going to go ahead and add some spacing to this header so i'm going to click on my section here i'm going to go to advanced and then on the padding i'm going to add some padding from the top and the bottom so from the bottom i'm going to add about 20. i might change that later on um but i think that's looking good and then i'm going to go ahead and add my my um all of these elements to the middle as you can tell right now they're set to the top so i'm going to go and click on my um on my column and on vertical align i'm going to go ahead and set it to middle and same thing with my nav menu just in case i'm going to set that to middle and it's probably not going to do much and then my button i'm going to set this to the middle as well perfect alrighty now from here i'm going to go ahead and probably make this button a little this logo a little bit bigger as far as my section though um go ahead and click on your section go into layout and i always make my content with about 1280. that's just how i do all of my pages 1280. make sure that's set to 1280. if uh if you're if you're if your website has a smaller width then you can go ahead and just set that to your size but i always set it to 1280 and if i set this to 1280 that means everything else on my website here let me go ahead and go to the home page everything else on here has to be set to 1280 as you can tell this one is not set to 1280 by default um but that is something that i like to do so um wait up let me go ahead and actually add this to my main website because i don't think it will set up properly here there we go these could be set already to 1280 and they are they looks like they are so okay so they're they're about 1280. as you can tell it kind of lines up properly um but i'm gonna i'm gonna go ahead and leave it at that all right so from here actually you know what let me go and see what they're what they're lining it on the website and if you guys are wondering this is just in an elementor pro template so all right so it looks like let me go and click on their section so they're doing 1200 and just for the purpose of this video i usually do 1280 for all of these so i would go into each section and make this you know 1280 and i could go ahead and line it up you know what i'm gonna do that because that's just something that i do i we set mine to 1280. um i go up so i suggest you do that too just for this video just so that i make sure that everything is looking good and you guys can get as much out of this as possible so and there we go let's last section here okay i'm going to save this now i'm going to go to my home page and now everything should be looking good okay now we just need to go ahead and adjust our header everything's lined up properly that just kind of bothered me when it wasn't lined up so from here i'm going to go ahead and make sure that our our logo is at a good size so if you guys are wondering what size this section is it's about i'm going to do about 12 let's see just have it at 12 for the column width now that's it to 12 i think that's good all right and then let's go ahead and adjust our um our typography here so what i'm going to do is i'm going to use a typography that we're using for this for this website particularly but you can use whatever font you want to use for ella follow the viral around i'm going to go and choose this one it's actually not that bad okay so from here i'm going to make the text here i'm going to make it black i might make it a gray color let's see that looks like they're using the gray um okay i do like that effect that they're using here whenever you hover down and then it gets brighter as you go as you can just notice that it's actually kind of nice okay so i'm gonna maybe make this a little bit um more grayish here about this color here i'll go ahead and zoom on this or i'll have the the color code right here alrighty okay that's perfect there and then from here i'm going to go ahead and just um customize my button so go ahead and click on your bun and we're going to probably use the same color so i'm going to grab the color here and i'll go ahead and zoom on this color code here whenever i add it in here or i'll go ahead and list it there we go perfect and you know what i'm going to do just in case i'm going to go ahead and save this color here i'm not going to name it anything particular all right and then this is like a digital marketing company so i'm gonna go ahead and just type in book a call that's my cta which is my call to action um then i'm going to move this over a bit go into style that might make this button a little bit bigger let me go let me go see what they have going on for their button so i probably want something um that goes with their website so they're doing a bun like this i'm gonna go ahead and make it round on my border radius i'm gonna set this to 100 now you guys can set this button to whatever you guys would like whatever goes with your website okay and let's see what fonts are using okay i'm going to change that there alrighty and what we can do as well we can even add an icon to it as well let's see if i add an arrow here maybe pointing and i'm going to go ahead and set this um it should be after and then i'm just gonna bring this button over a bit here um you know what i don't really like the i don't really like that so i'm just gonna move it over and then i'm going to make my bun a little bit more longer on each side i'm going to click on my style here with my button and then i'm going to go into padding and once you go ahead and click on this it's going to go ahead and just remove the padding completely so from the top i usually like to do about 15 and from the bottom about 15 as well and then from the sides maybe 50. oops we should do 15 there and from c15 sorry from the on the side here we can do 50 15 15 15. okay and let's go and just extend this a bit there we go now it does look like they're probably no actually looks pretty similar their buns are just a little bit smaller but i think that's fine okay so i kind of like how this looks okay call i think that's perfect it's a perfect call to action let me go and view this on the website here all right there we go i kind of want to make this text stand out a little more so maybe i might make it a little more a little more darker perfect okay now that's looking good and then we're gonna go ahead and add a bar at the top here so go ahead and add a section at the top and make sure you have it set to two columns and then we're going to go ahead and i'm still going to adjust this header i'm just going to add this on top of here for now so go ahead and click on your section here and then go ahead and set this up to about 1280 for this the content with and then what i usually like to do is i like to add a list here i'm going to go and add a icon list and then i'm going to set it to inline and then from here maybe we can add a phone number so my first one will be a phone number i'm going to go ahead and and just add a random number and don't worry i will customize this make it look a lot nicer then i'm going to go ahead and grab a phone icon let's see here i'll probably have to want to grab a mobile so i'm going to grab a maybe the phone icon would be better this icon here here we go and the next one would be an email so i'm gonna put my email at website.com or i can do support how about that or at website.com and then i'm going to go ahead and look for an envelope and there we have it now for this one this can actually be the location i'm going to put a building instead and then i'm going to put um i wouldn't necessarily put like the address you can but maybe you have like an area that you service so you can do maybe like usa um canada you can do sorry let me actually just i'll check to capitalize that later just say canada and then maybe you do um you do europe as well or something okay all right so now that we have that set up there let's go ahead and start customizing this so on your icons go to style and go to your icons and now we're going to be using the color that we used before actually what we want to do we want to go ahead and change the color of this entire bar we want to go ahead and fill this section so maybe let's set this to white instead for our icon let's go into our section and on the background color we're going to go ahead and choose the color that we used before now what you can do you can make this gray if you you know some some people like to make it gray um or whatever that may be or whatever website color you're using i'm going to go ahead and just choose the color that i'm using for my website and then i'm going to go back to my um my list here when i already set my icons to white my text is going to be white as well there we go and i'm going to set this to the right font um what will font what we're using actually totally forgot the name varela okay so we're going to be using the varela font all around there we go and what i'm what i'm gonna do is i'm gonna go ahead and just shrink this a bit i'm not gonna have it too big and then i'm going to set this to the middle so make sure you click on your column and set this to the middle that's perfect alrighty and then we're going to go ahead and add some padding to this section so click on your section go into advanced go to padding and we can do about five let's see how that how that looks that's looking pretty good there now what i want to do i want to go and add something here so on this side i will go ahead and add maybe a login and a log out like not really a login but just maybe on my account or something like that you can set up so in case you want people to like log into your website um so i'm going to go and add another icon list you know what instead of adding another one i'm going to grab this one here i'm going to paste it to this side i'm going to click on my um my icon list go to style and i'm going to set this to the right and i'm going to remove this one and i'm going to go ahead and put um my account and we're going to be looking for a user so let's go ahead and choose this one right here enter my account and the other one can be registered or you can even have it sign up wherever you would want to do that have that set to sign up instead um and we can go ahead and add an icon for that one or you know what you don't necessarily have to add an icon for that one as well we can just remove that one and we can remove it for this one too and then we can go ahead and add a divider and then i'm gonna go ahead and just bring my opacity down so it doesn't pop out that much now if you wanted to you can add a divider for these as well but i'm going to go ahead and leave it as is now of course if you actually did want to set all this up um and you did want to have your own little log out and log in um [Music] section here i actually do have a video on how to do that you'll just have to create a new nav menu and you have to add it in here and i'll try to link the video um somewhere in here you guys can watch that and learn how to do that okay so now i'm going to go ahead and do this here and there we have it now that's looking good now our bun here doesn't seem to line up now that's kind of an issue at least for me looks very unprofessional so i'm going to go ahead and line that up here i'm going to make sure that my bun is set to the right there we go now we might still have some spacing and if we do we'll need to remove the the section i'm spacing here okay so that looks to be just about right um you just kind of kind of can't tell really that okay all right so that's looking pretty good now what we want to do next is we want to make sure that it's mobile optimized now this is a part that gets pretty interesting because this is where a lot of your viewers are going to be looking at your website through mobile so let me go into inspect here and let's kind of see what happens here now this is still our desktop view and then right there it gets it gets sent to um that tablet now we're gonna focus on our desktop view still because as you can tell before we even reach our tablet view you have this issue here everything else looks pretty decent we'll probably add some spacing on each side first but we tend to have this issue where this button um tends to get bigger and uh and the text kind of um yeah the text isn't looking that great so we need to fix that there so let's go into header here um into our header and the first thing i'm gonna do is i'm going to go ahead and add some spacing on each side which is fine so what i would do is i'm going to go to layout and then i'm going to go ahead and do 12 i'm going to do 1290 and you'll kind of see why i'm going to do 1290 because i'm going to move actually you know what i'm going to do 12 i'm going to do 1300 and the reason being is that i'm going to go ahead and add a padding on each side and that's going to be set to um to 10 on each side and that equivalence to you know when you bring that down that'll be 1280. so i'm going to click on your section here go into advanced now this is just what i do i'm showing you what i do on on my websites um so i'm going to go ahead and do 10 on the side and right 10 on the left and 10 on the right and then i'll be doing the same thing to this one as well so it evens out to 1280 regardless there we go and now as you can tell whenever we shrink this because everyone's going to have different different computer different desktop sizes for different monitor sizes so now as we can tell it's looking great but whenever we shrink this we have that spacing which is perfect and then it goes into um tablet but we still have this issue with our button here so from here what we're going to do is we're going to go and extend this now and give it give it some spacing here so that's basically all we need to do is just give it some more spacing that's usually the issue here there we go now we might shrink this a little more and see if we have an issue okay so we still have an issue we just got to move it a little more all right let's go to refresh this all right there we go so we don't have an issue now and everything seems to line up perfectly yup it's all looking really good i know that there's always a lot of issues when you're building your header and i and i've seen so many websites where um they have those issues and i just really want to help you guys fix those um because i think it's such an easy fix all right so now we can go ahead and focus on our tablet view and what i would like to do on our tablet view now what we can do is first of all we can go ahead and and um i'm going to show you what i mean here let me go to inspect so whenever we shrink this to tablet view when it goes to teleview we can still have our text so i'm going to go ahead and click on my menu now i'm probably not going to do this but i'm just showing you an option here so on the break point we can have it set to mobile instead that's when we're going to have our hamburger menu so as you can tell on here we'll still have our menu here and it's not really that bad but as you can tell i mean right here for instance it's not looking the greatest so i would rather have this set to a menu whenever it goes into the tablet and i'll go ahead and fix this as well so i'm going to go ahead and just set that back to how it was actually what i'm going to do instead is instead of refreshing it every single time i'm going to hit preview so then it automatically refreshes here and i'm going to go here all right so as you can tell we have this hamburger menu so now what i want to do is go to fix the top first i'm gonna go to tablet and then i'm going to go ahead and bring this make sure this is set to the middle always and this one as well the column is set to the middle i don't think i did that on desktop so let me go ahead and make sure this is always set to the middle because by default it should have been set to the middle for both of these i think they're going to be good there we go so now they're all both set to the middle so i'm going to go ahead and just shrink this one straight this section here so then it fits properly um about 20 here 25 uh maybe we can do 23. yeah about 23 is fine and then right here we're going to go ahead and do we did 23 um so the size should be about 70 77. all right so now that's looking pretty good and we stop that spacing which is perfect on each side and we just need to go ahead and fix our bun here so i'm going to go ahead and go ahead and give my bun some more spacing so let's do about 30 nope that's a little too much let's do both let's give it 35 that might actually work okay and then let's go ahead and just give this one about um i'm actually going to guess right now because honestly don't know let's do 50 60 so fix these too much so it'd be about 55 53 or okay so 53 alrighty now we're probably gonna adjust this by the way i'm just fixing this i'm going to set these all these are all set to the middle already so i should be good i don't even have to add that there all right that's looking um it's looking good but something that i do want to do personally is i don't want this set to the middle all the way over here it just it's not a good spot for me i want to go ahead and move this to the right and i want to have my button on this side but you're probably like well how do i do that i mean there's no option i don't know if they ever used to have an option on that where you were able to move these i had a feeling they did back then where you were able to move each section depending on depending on where you wanted it so for instance this this um this column would have been one this column would have been two and this column would have been three and you were able to set this one to three and then it would move over for mobile i think they used to have an option for that um but i don't know maybe they still do and i don't know where to find it um but i believe they don't so i'm going to go ahead and just add some custom css and i'm going to move this to the right manually so go ahead and click on your column here this part is very important so click on your middle column where you have your hamburger menu and then we're going to go into um advanced custom css and we're going to go ahead and type in selector and that's basically going to select our entire column here and we're going to add some curly brackets i will have a link i will have this down in the description so you guys don't really have to type this out but it's really easy to type out and then you can type in order and then we're going to name this order three and as you can tell it's going to move it over which is perfect but we will have a an issue here when you will you will notice and the issue is that it's set like that on on on on desktop now and it's like i only want it on mobile right so that's kind of an issue there so we need to go ahead and add a um a media media only screen for mobile and for tablet so then whenever reaches a certain after an endpoint um or a certain uh size for your screen so what we need to do is we need to go ahead and type in our media so and you'll see what i mean i'll have this down in the description so you guys don't have to worry about this media only stream and put some brackets here um and then we're going to go ahead and type in max with and this is going to be set to 10 25 because that's where we have our breakpoint and we're going to add some uh colons here and then i'm going to do about pixels and let's set this to 10 25 instead of instead of 20. there we go and then we're going to go ahead and add some curly brackets here and there we have it now i will have this down in the description so you guys don't have to worry about this um so you guys can just copy this code here so anyway so as you can tell now when i go back to my desktop view um this is looking perfect and when i go into my mobile it goes it goes ahead and switches for me so let's go ahead and fix this so now i'm going to go ahead and give this one the most space here so i'm going to click on my column here i'm going to go into layout and i'm going to maybe set this up to like 10 even 5. i think 10 would actually work let's do 10 and then i'm going to go ahead and extend my layout um my column width here so i'm going to do about 70 i believe let's see we can do 75 here i want to go as much as i can so i'm going to do six seven eight nine okay so it's about eight there we go that's perfect so now we can do is we can go ahead and adjust our hamburger menu here let's go and view how this looks like real quick we make sure that we don't have any issues here all right now our logo does get smaller so we will adjust that later on but i'm going to go ahead and just adjust my hamburger icon here so go ahead and click on your hamburger icon and then go into style going toggle button we can go ahead and make the background blue or blue purplish whatever you want to call that color um go ahead and add make this a little bit bigger but as you can tell it kind of just i don't know like i'm just you i feel like i'm using this color way too much i'm going to go ahead and just make this really simple i'm going to go ahead and just make this transparent here we don't have a background color and i'm just going to make this black or gray there we go oops make this black or gray and then i'm going to just make the size bigger and i'm gonna make sure that i set this up to the middle and i don't want any spacing on this so i'm wondering if there are if there is any spacing and if there is it doesn't look like there is border radius we might just need to fix this sometimes we do come across those issues here so on your padding going to margin and i would honestly just fix this here um so we can do a negative let's go to do a negative 10 here [Music] so that did fix that issue but then we want to fix from the bottom so let's do negative 10 from the bottom here we go so that's not that bad don't all lined up properly though if you can tell so maybe we can do negative 15 or sorry negative yeah negative let's do 1 15. remember that see how that looks all right now that's looking a lot better there and then let's go back into our style here and just make that a little bit bigger now we want to go and extend our logo a bit so i'm going to give my logo some more spacing and i might need to adjust this column as well so click on your column for your logo and maybe let's do let's do about 15 or you know what 20 was fine actually i don't think 20 was that bad but um do 17 instead 17 and let's just go ahead and start bringing this down maybe we can bring this down to about 70. 71 72 70 73 24. it was about 73. let's have that said 73. it's looking pretty good alrighty i'm going to go ahead and click update here and as you can tell there we have it but whenever we click on this we have this issue here so it's clearly not the best so we want to go ahead and set that to full width and that's a very easy fix so click on your hamburger menu here on your nav menu go to content and then over here go to full width and just leave that as checked let's go to refresh with now i already got refreshed and there we go now it's perfect already set up and uh it's going to customize this let's go into style drop down and our background here we want to go and set it to our oops actually you know what sorry set that to white to white it's on our hover so on our hover there we go on our hover that's working looking good and our active we also want to go ahead and set it to that color as well right now it's looking pretty good but if you did want to adjust any of this which sometimes you do you know you can go in here and adjust uh let me go ahead and open this up here one here you can adjust the typography that's something that you wanted to do um i kind of you know what actually i might actually make it a little bit bigger because it is kind of small and what i can do as well is i can set this to the middle instead um so let's go into our content here and we can go ahead and let this to the middle i believe let's see here that might be that'll be our other one so let's see if we can oh aside center there we go so we can set us to the middle if that was something that we wanted to do i kind of like them on the side so i'm going to go ahead and have it how it is now and it's looking pretty good but if you did want to stylize this you can go into drop down you can adjust the border radius if you didn't want to add a border radius you can just uh the spacing on here maybe you can move it a little more uh you can do the the vertical spacing can be a little longer if you want to give it more space which i'll just adjust it however since i'm already touching it here uh you can even have some distance from the bottom from the top this part is very important because sometimes um you might have this under so you do have to have this pretty close to your header just about right there that part's pretty important there and let's go and take a look at this now let's take a look at this on my homepage here there we go as you can tell since i do have my header here i can bring this a little more down do that i can bring that a little more down here and go back to my homepage here there we have it that's looking a lot better now if you guys do want to adjust this hamburger menu and move that around just go into advanced here like i was doing and just adjust it so then it ends up aligning perfectly with your button sometimes you will see that issue i'm gonna do maybe 13 instead or let's do um 10 here or we can even set this to five let's do five just because i was saying there was a little issue there i'm gonna have it set to five instead there we go now just it honestly depends on your header you have some like pre-defined spacings for each widget sometimes um they're just set by default all right so that's pretty good there and then now i'm going to go into my mobile view which is going to be the last part of this video here so if you can tell now we just need to fix that i mean it's looking really good on tablet and now on mobile let's go ahead and just adjust this here so we can go ahead and set this to the middle and set this one to the middle as well you can add some spacing between um your your uh your list here so you can space this up a bit you can space up you can make your icons a little bigger if you wanted to some spacing between this um that's pretty good so and then my login is right there now if you did want to if you honestly didn't want to display certain things um some that's something that i did i did want to go over i mean i kind of don't really do that anymore just because i know how to um optimize everything for mobile just by using just by using one section i don't have to create a different one but let's say for some reason you wanted to have a different um a different header for your mobile view we'll duplicate your current um header here and then one of them is going to be displayed for mobile and the other one is going to be display for desktop the top one is going to be displayed for desktop so basically we just need to go ahead and hide it on on mobile and tablet so i'm going to go into your section go into advanced and then go into responsiveness and as you can tell here we can adjust this so we're going to go ahead and hide this on mobile and tablet and now we won't be able to view this on mobile and same thing for our section other going to go ahead and hide this on desktop there we go now whenever we view this there will still be one menu you can tell i can refresh it right and i mean you can't see the difference right now but if i go ahead and start changing this one around if i go to tablet here because this is a menu that we're using on tablet and i go ahead and make this color um you know red or something right and we click update and now you will you will notice whenever we shrink this to a different a different size our header changes that's how you would go ahead and do that um but i don't really i used to do that some when when things wouldn't adjust properly for certain sizes i used to do this but now that i got kind of better at elementor and whenever you just use one section but i just wanted to show you that just in case um so now i'm gonna go back to my section here i'm gonna go to advanced and i'm gonna remove these issues here you hopefully don't have to do that but if you did want something custom you know something more custom for mobile you can do that as well so let's go back to our mobile view here so that's set up on the top here now we want to go ahead and um make our column width a little shorter here so let's do about um 20 so we can go ahead and fit everything in here it's about 25 i might have just had a little more now i do want to use my button and trust me you can use your button you just got to make it really small that's perfectly fine so what we're going to do is go into style go into our padding and want to go to make our sorry let's go ahead and click on our typography here and our text our bun color our bun size sorry our font size we want to make that a little smaller there and then what we would do is add some padding to this so from the top we can do about five from the bottom about five and on each side let's just do 10. we don't need it to be that big um maybe you can even do a little more you can do maybe eight adjust a little more there we go we can maybe do 15 i mean i think we can even fit it at 15. there we go all right and then we can set our button here so um it's going to set this to about 20 20 is not good it's it's probably going to get uh the biggest size so we'll probably have to have it about that size there that's about 50 this is already set to 30 so we're gonna have about 20 left so 20 will be set to the one on the side and we might make the hamburger icon a little smaller it doesn't need to be that huge it obviously looks really huge for um for mobile so let's go to go into our toggle button and to make it a little smaller here and that's perfect all right now if we did want to shrink um our section here we can do that as well so we can go into our padding here and we can obviously i want to always have like have a maybe 10 on each sorry i want to go ahead and have about let's see 10 at the bottom and 10 at the top and then for each side we can do 10 as well hopefully that doesn't affect it and that's perfect now if you did want to move over your bun a little bit what you can do is you can go into advanced go into margins and from the right side we want to do a negative so we can do maybe five and then set it to a negative and then you can just keep moving here so let me do eight and then add a negative now usually you will have these on little buttons you can press but for some reason elementor glitches sometimes and you do have those issues there um see here okay i'll go ahead and click update and let's go overviews now i should have already adjusted for me here there we go as you can tell the button shrinks outer sides which is perfect and everything seems to align properly and there we go now what we can do as well just in case things aren't lining here we can move this to the end um always always i always end up setting this to the end right here we can even go to advance i believe let's see if i can go to advance on this one um positioning set to inline let's see if it works no i didn't move it as much so let's have it set to how it is that's fine all right that's perfect um now what we can do is just remove the spacing on the right so as you can tell from the right side we just we'll just remove that just because i feel like i feel like there's too much space in here so let me refresh that there okay now that's a lot better there we go now everything seems to be working properly now the last thing we can do as a bonus we can go ahead and add a sticky header because i know a lot of you guys like adding sticky headers and it's pretty easy to do so we'll go into the desktop view go ahead and click on your section here go to style make sure you have a background set on this set this to white so whenever it's scrolled it's going to be y on the background then go to advanced um make this make sure you have a section go to uh go to uh motionfx go to sticky here go to top and we want this set on desktop tablet and mobile yes that's fine go ahead and click on update go home and there we have it so now let's set up really looking really good and let's go to inspect and now whenever i scroll this works properly now of course we do have the space but that's because i'm using i'm on wordpress but if i logged out it would be working properly here i'm going to click on that so this is already on tablet you can tell same thing here it's looking really good okay so now that's perfect and that's pretty much it for this video um i know this was kind of a long video uh but there is a lot to take in and it could kind of give you an idea of how you should be building your um your headers so um yeah i hope you guys really did enjoy this video if you guys do have any questions um just feel free to just for free to reach out to me comment down below and i'll definitely help you guys out and if you guys um did really enjoy all of this uh consider subscribing and of course liking the video for the youtube algorithm if you do want to support the channel i do have a patreon um i'll link it somewhere around here so you guys can check that out um and if you guys don't have elementor pro i highly suggest getting in la mento pro um it does come with a lot of features you know team builder pop-ups uh contact form step forms and all that so if you guys do want to also support the channel that way by buying one of my affiliate links and i have with elementor i have that down below as well but as always thanks for watching and i'll catch you guys in the next video

Channel: Uriel Soto

Views: 11,844

Keywords: elementor pro, elementor header, elementor tutorial, elementor pro header, elementor pro header design, responsive header elementor, responsive header elementor pro, elementor header mobile responsive, elementor header tablet, elementor header 2021

Id: 8lFEdJnc8ck

Length: 46min 11sec (2771 seconds)

Published: Wed Feb 03 2021