How to Create a Transparent Sticky Header on Scroll with Divi Theme 2021

hi guys my name is stephen welcome back to wp lifestyle if you are new here please don't forget to subscribe and hit that notification bell so you get notified once i upload a video in today's video i'm going to be showing you how to grade a transparent header using your dv team builder so if you are using the dv theme and you want to create a transparent header i'm going to show you how you can do that in this video you don't need any other plugin or any css so you can see here that i have a website with a transparent header right here and then you can see that we have a menu here we have a logo and we also have a contact button right here so when we scroll up like this we are going to get the sticky header you can see the sticky header with the white background we also have our button here we also have the menu and we have the logo here as well so i'm going to show you how you can grade this for your website using the dvd so let's log into this wordpress website and i will show you how you can do that so now you can see that i'm in my wordpress dashboard right here so if i scroll down here and go to divi if you hover over the view like this you are going to see these options right here we're going to click on the theme builder right here and then over here in the teamviewer you can see the global header that i just grated which is this one that we have over here if i refresh this page you can see and i can also show you how you can have a different header for different pages right so let me go to the shop page right here you can see that we have a different header over here with a different button different logo so if i scroll up you can see that this one changes to black background so we have a different completely different header here and if we go back to the home page you can see that we have a different one with a white background so i'm going to show you how you can do all that but for now i'm going to go ahead and delete this global header that i've created here which is this one right here so i'm going to delete this click on delete button over here and it's going to ask me if i i'm sure that i want to delete this i will say yes so now that i've deleted that all the pages here with global header will be uh deleted as well you can see all the global header here are gone now we don't have any global header so i'm going to click on save changes and then if i go back here and refresh this page now you can see now that we have the default uh dv header right now which is really really boring you can see what that looks like so i'm going to go back here and add a global header so here we're going to select build from scratch and then from here you can see that we have this section right here so this is a section if i click on it you can see it's a section setting and the first thing we need to do is if you look over here you can see that this section is really really wide and we don't want our header to be this big right so we want to make it smaller so we're going to go inside the section right here and then we're going to click on spacing and then here we want to put a 0 on the top and the bottom pattern so we're going to add 0 here and then we're going to click on this link to add zero here as well now if i go back here you can see how small our section is right now so i'm going to click back on the section again and then i'm going to go to background because we want transparent background so we want to make sure that this background is transparent so we're going to click on this transparent icon right here so click on transparent so click on ok so now we are going to go in here we are going to add a row so depending on how you want your header to look you can decide which row to add so for example let's say that we want to achieve something like this we're going to make sure that we have a two column row like a small column over here and the bigger one over here so let's go back here i'm going to choose this one right here so for now let's give this row a background we're going to get rid of this background letter because we are grating a transparent background right but for now i just want you guys to see what we are working on so right now you can see how small this row is but we want to make this row full width we want to extend it all the way to the end of this section over here so we're going to click on selling here and then we're going to go to design and then we're going to click on sizing and here we want to change the size in here we are going to change the golden width to one right so we are going to change this to one make sure the width is on one and you scroll down and we are going to change the weights to 100 and then the max weight here we're going to change that to 100 as well just type 100 in here okay so we change that to 100 as well now you can see that our row have extended all the way to the end of this section so now that we have that the next thing we need to do now is to go in here and add the modules so inside here we want to add the menu module so type in menu here and then we're going to add that in here and then over here we're going to add a button so now we have it here but the button i want to change the alignment i'm going to change that all the way to the right and then let's start with the button i'm going to style the button we are going to go over here and then we are going to click on design scroll down and click on button and then we're going to use custom styling and here i'm going to give the button test i'm going to give it white and then i'm going to give it a a color i'm going to give it this color for now and then the bottom line i'm going to reduce that to one so that's fine i'll leave it like this for now i'm not going to do too much styling i just want to show you guys how you can do this you can style it however you want and then we're going to close this so now we go over here to this menu module right here and the first thing we need to do is to get rid of this white background that we have over here so i'm going to go to background and then i'm going to click on transparent so that will get rid of the background and then i'm going to go to design and click on menu text and then over here you can see the active link we can change that to this color and then we can scroll down here and change this menu text to white and then the size if you want you can change the size i will make my 16 like that and then if you scroll down here you can see all the settings if you want so i want to make sure that the alignment is on also on the left side like this so that's what we have right now and then if we have drop down you can click over here and then you can add all these drop downs uh colors right here but right now i don't have any drop down so i'm going to skip the drop down settings over here but if you have one you can go ahead and change the colors right here it's pretty self explanatory right here so i'm going to go back here to the logo so this is the logo we don't have any logo right now so i'm going to go back to the content i'm going to click on logo right here and then i'm going to add a logo so i'm going to choose one of these images here so i'm going to go ahead and choose this guy right here has my logo for now since i don't have any logo so it's going to look like that so use your own logo i'm going to scroll down to elements so if you want to show the shopping cart icon you can click on this to turn it on and then you can click over here to turn on the search icon here if you want to show it and then you can go to design and scroll down to icons and then you can change those colors let's say i can change this color to white and change this one to white but i don't want to show any of those so i'm going to go back to elements here and then i'm going to turn both of them off and then for now the next thing i want to do is to change the size of my logo so i'm going to go to design and scroll down to sizing and then i'm going to click on logo max weight and then i'm going to change this to whichever size that i want so play around with the size over here i'm going to leave my own 50 and then this one you can just leave it like this i'll leave it on 100 or none like that and then now you can see how big our header is if you like your header this big you can go ahead and leave this like this but i don't really like this i like my header really small like this so i'm going to go ahead and close this and then i'll click on this row the green one again and then i'm going to click on design and then click on spacing and then here i want to add a top button and the bottom pattern so we're going to put zero here and then also link it to put zero here as well so now you can see what we have is looking really nice but the problem now is that this is all the way to the edge i don't like that so you can you can really go ahead and add a padding imagine here but the problem is like if you add imagine here it's not going to be part of the section it's going to add it outside the section but what we really want to do is to add space inside the section not outside the section so because of that we're going to go in here inside the left and right pattern we're going to add 20 percent so we're going to add 20 over there so now you can see we have 20 in here and then we're going to link it to add 20 here as well so this is how it's going to look like but if you don't like it if this is too close for you you can go ahead and mess around with the percentage here you can change it to 10 percent if you want and then it's going to look like this so i'll leave my own 10 percent for now so now that we have this here you can see that our button is now hanging up here it's not really uh balanced it's not in the middle so i don't like that i'm going to close this and then i'm going to select the button and then i'm going to go to design and click on spacing now i'm going to add the top margin i'm going to add maybe 10 pixels over here or maybe 15 pixels like that so 15 pixel that's looking really really nice so i'm going to leave that like this for now so now if we save this and close this and go back here and save the changes so the reason why i close this because i wanted to show you guys our progress so far so if we go back over here and go back to home page now you can see what we've made so far so if i scroll down here you can see that the header is not sticky yet so we're going to go back to the theme viewer again and we're going to open this so from here what we are going to do now is to go inside the raw setting right here and then if we go back here to the background you can see here if we hover over here you can see that we don't have any sticky options right here we can also turn the sticky option on from here but we want to make sure that every column and every module inside this row inside this section have the sticky option so because of that we're going to go inside the section here and then we're going to turn on the sticky option in here so we're going to scroll down to scroll effect and then over here we're going to turn on this sticky position we're going to turn this on to the top so we're doing this inside the section so this is the section so this is going to turn this on for everything inside the entire section so we want to make sure we do that inside the section right so now that we have that we're going to go back over here inside the row setting and then we're going to go to the background we scroll down here and click on background now if we hover over here now you're going to see that we get this option here that look like a pin so that is the sticky option so now we're going to change this normal background to transparent so we're going to click on this transparent button here and then we're going to go over here and click on this sticky button here and then we're going to click on sticky over here and now the sticky header we want to give it a background so you can go ahead and give your sticky header any background that you want so i'm going to choose this background so now you can see it right here because we are inside the team builder we can really preview what we are doing right now so i'm going to go ahead and save this like this and i'm going to go back over here and refresh this page if i scroll up you can see right now that we have this color as our sticky header background but the problem here is the transparent header is not working because we still have a white background here so let me show you how you can fix that so we're going to go to row settings so from here make sure you're inside the row setting the green one so click on that and then you're going to click on advanced now scroll down to position so here you can see that the position right now is on relative so we want to make sure we change this to absolute so we're going to change this to absolute position and now you can see all these selections here is on the top left we're going to leave it right there and then we're going to click on save so we click on save changes right here now if we go back here and refresh this page now you can see that we have a completely transparent header that when we scroll up we're going to get this really really nice sticky header the one problem that we're going to fix right now is the mobile version so if you go on mobile right now if we do this you can see that our header is going to look like this it's really messy and we don't like that so we're going to go ahead and hide this button on mobile right and to do that we're going to head back inside the team builder and what we're going to do now is that we're going to select this section we're going to select this row this green row right here and then inside the row there's a two column right here so the first column is this one right here that we have our menu inside and then the second column we have the button inside so we're going to click on the second column and then we're going to go to advanced and go to visibility and then we're going to hide that second column we're going to hide our second column on tablet and on mobile as well so we're going to click on save click on save changes and then i'm going to go over here and refresh this page now you're going to see what we have so it's going to look like this and then you can see right here that we have our hamburger icon here we can click on it to open at the menu right here you can see our menu don't have any background right now so that is really funny so if you scroll up you're going to see this you can see it doesn't have any background right now so you can fix that by going in here and clicking on the menu and then we are going to go to design and then we are going to scroll down here to drop down menu and then over here you can see the mobile menu background we can change that to black and then we can change the mobile menu active link we can change that to different color and then we can scroll up here the i drop down menu text we can change that to white so play around with these colors right here and then you can also go ahead and give a different color for the transparent background on the mobile menu you can see right here if you click on the sticky option here go over here and then you can change this color so let's go over here so you can see what i'm talking about so right now you can see that we have the black background right here so you can really give it any background that you want so let's say you want to give it yellow for example you can scroll down here and go to mobile menu background and then you're going to click on yellow here and save changes and go back over here and then you can refresh this page and click on menu over here now you can see that we have a yellow and drop down menu over here so it's really that simple so the last thing i'm going to show you is how to use different headers for different pages right so right now if we go to the shop page you can see that we have this header right here so let's say you wanted to use a different header for your checkout page right now you can see our checkout page does not have any heading right so this is going to have the default wordpress header so we're going to go over here and click on checkout now you can see that we have the default wordpress header right here so what we're going to do now is if you can click on this header right here you can use the global header so if you use the global header it's going to put this header right here over here so you can see it's going to put this green header here so if i now go back to checkout page and refresh it we're going to get that global header here you can see that right now so let me go back here and delete this so if you want to give it a custom header just go ahead and click custom header so what we're going to do is just to make this easy so we don't have to create a new header i'm going to open this and then i'm going to copy the entire section i'm going to click on copy i'm going to copy the entire section and then i'm going to close this and come back here and then i'm going to build a custom head i'm going to build from scratch and once this open we click on build from scratch and then we are going to close this and we're going to click on this blue icon and then we're going to paste this section that we copied and then we're going to delete this top one right here so now we have the section now if i click on this section we can really give this uh any color that we want so maybe right now i want to use a different color here so i'll scroll to the background or maybe i want to add more stuff in here maybe i want to add two buttons in here i'm going to click on this row setting i'm going to choose uh this one right here you can see right now that i just duplicated this button and then i added another button here and then what i can do is i can go in here and then i'm going to change the alignment of this button i can make it to the middle to bring it closer or i can make it all the way to the right put it over here side by side and then i'm going to go to a spacing over here and then i'm going to put a space over here like this so if i save these changes right now this is just an example how you can grade different header for a different page and then i can close this and then i'm going to save it and then now if i go to the checkout page and refresh it now you can see that we have two buttons here on the checkout page and if we scroll down we still have the two button here on the sticky header and then if we go to the home page or any other page we're going to have this headers right here and this is how you can go ahead and assign different headers to any page so you can go here and use global header for all of this you can use global header for pretty much all your pages you can go ahead and delete your previous header and then you can add your global header then all your pages is going to use that global header so guys this is pretty much how you can use the dvd builder to create a transparent header for your website without using any plugins at all so if this video was helpful for you one way or a daughter please don't forget to like this video subscribe to my youtube channel and hit the notification bell so you get notified every time i upload a video like this thank you so much for watching and i'll see you in the next one

Channel: WpLifestyle

Views: 3,173

Keywords: Wplifestyle, Stephen iloka, divi fixed header, divi builder tutorial, divi transparent header menu, divi transparent header, divi transparent header until scroll, divi transparent navigation bar, divi transparent sticky header, divi menu transparent, divi theme builder transparent header, divi menu transparent until scroll, divi tutorial 2021, Transparent divi header with, how to make your transparent header sticky on scroll with divi, Transparent Divi header 2021

Id: XW95w6m9Cuk

Length: 18min 37sec (1117 seconds)

Published: Tue Mar 09 2021