How to Make Your Transparent Header Sticky on Scroll with Divi

[Music] so [Music] so [Music] so so [Music] [Music] hey divination thank you for joining us in this live stream today we'll show you how to make your transparent header uh sticky on scroll with divi in the theme builder so if you haven't checked out the video make sure that you do i've mentioned a link in the description below and without any further ado let's get to it all right so let's start off by taking a quick look at the outcome of this tutorial before we get into the tutorial steps so at the top over here you can notice a transparent header and this looks you know transparent when you first enter the page but as soon as you scroll it becomes sticky and these styles change so there's a white background color the text color has been changed the logo has been inversed and also we picked up the button that was first overlapping the top header bar and we placed it in the second bar so we'll show you how to do that using divi and the theme builder let's take a quick look on smaller screen sizes as well so over here let me scroll to the top we have again this top header bar and then we have a transparent menu if i click this we have a dark background with a white text color now if i start scrolling this changes in style and becomes sticky and if i click this the styles of my drop down have been changed as well so we'll do that uses so we'll create this using the divi theme butler and the new sticky options that divi provides you with so let's get started i also want to mention that you can find a link to the blog post with all of the steps written down and print screens as well by going to the link in the description below so over there you can grab some color codes and you can also download the template file if you want to get started with it right away um and yeah let's get started if you guys have questions make sure to leave a comment on youtube or facebook and i'll be keeping an eye on those all right let's get started so over here within the divi theme builder i have this global header already which is the one that i've just templated all right so once we're inside the template editor we're going to select the first option which says build from scratch to start building right away all right so we are going to start off by designing the first section which is the top header bar over here with a cta of your choice so you can place anything you want in here we're just going to you know enter a text module but you can customize this however you want um using the divi theme builder but first we're gonna style this section that's gonna contain this text module so i'm gonna open these section settings go to the background settings and give this a black background color next i'll move on to the design tab and i'm going to remove all default top and bottom padding that you can notice over here by adding zero pixels to both options then i'm going to add a new row with one column and place a text module inside that inside that column let me just grab the copy really quick so i can enter it so i don't have to type it over and bore you guys to death all right i'm going to paste this over here then i'll move on to the design tab and i'm going to change the text font to oswalt i'm going to enable uppercase and i'm also going to change the text size across different screen sizes use a white text color too i'm going to use 19 pixels on desktop 18 pixels on tablet i just enabled the responsive icon 18 pixels on tablet and 16 on phone and i'm also going to use center text alignment over here all right let's switch back to desktop so the style that we're creating let me just show you guys really quick the style that we're using for this particular header matches the travel agency layout pack really well so this is the one so we're using those styles to create the header but you can style this however you want but it goes really well as you can notice with the travel agency layout pack if you want to check that out you can go to elegantthemes.com layouts and search for travel agency all right now that we have this top header bar we can focus on the second bar which contains our menu and which will you know make transparent at first sight and turn sticky afterwards so this is where all of the magic will happen so everything really regarding this tutorial that's very important will happen within this second section over here so i'm going to add a new regular section all right and i'll start off by removing the top and bottom padding of my section now this is very important the way we're going to make this you know bar that contains our menu sticky is by turning the row itself sticky as opposed to the section so it's actually the opposite i mean like we're gonna turn these sections sticky but the row itself will be absolute positions if that makes sense so that's going to be the transparent part the row is going to be transparent part and we need to make sure that the section itself doesn't actually um have any space that's why we're removing the padding so say we were not to remove the top and bottom padding over here we'd have some white space which we obviously want to avoid if we're going to go for a transparent header i hope that made sense but you'll you'll definitely notice along for the longest tutorial why this is very important so you need to remove the top and bottom padding values of the section container right so now our section container is basically just holding our row which will you know contain all of the sticky styling which will be made absolute positioned so we have this kind of transparent effect now to create our row we're going to use the following column structure wizard which is the following one that i'm hovering right now and i'm going to open the row settings and over here in the background settings i'm gonna make sure that my background color is completely transparent so you'll be able to tell by the zero at the end so this could be anything as long as there's a zero at the end that means it's completely transparent let's just take a completely transparent black color over here very important this will make sure that everything below the row and thus the menu will show up so you will definitely need to assign a transparent background color to the row then in the design tab in the sizing settings as you can notice over here so as you can notice over here it kind of takes up almost the entire width of the screen so to achieve that we're gonna add some custom sizing settings we'll start with the custom gutter width by toggling this to yes and we'll use one then for the width and the max width we're using 100 which basically just stretches the entire row and you know in this particular state that we're in right now the size of the section and the row container are exactly the same so it reaches both sides so row reaches for the left and right side of the section container in the spacing settings you can definitely notice some left and right padding over here we're gonna add that to the padding value so this is still part of the row container itself that's why we're using padding instead of um less width by adding padding we're making sure that this 10 space is still part of the row container it's kind of the same as using like if if you were to modify the width over here to like 90 or 80 percent for instance that would be kind of similar to using 10 left and right margin and that would mean it isn't part of the row but we want it to be part of the row that's why we're using 10 left and right padding instead of modifying the width or adding margin all right and we'll also add a box shadow and right now we're gonna go for a completely transparent shadow color which will change later on in a sticky state so you can definitely notice that here that there's no box shadow but as soon as it's turned sticky and you'll notice on a white background color um there's a subtle box shadow which helps separate the header from the page content so later on we'll use these settings and change the shadow color in a sticky state and now a very important part to making the entire row transparent so the row containing all our modules which will aid which we'll add later on is going to the position settings over here and selecting absolute position and we're using top left over here so this will just remove kind of the container space that's taking up taken up by the row itself um and it will place it uh on top of whatever comes next which is the hero section in this case and in most cases the section container still exists but because we removed the top and bottom padding so the default top and bottom padding um it doesn't show up there's no nothing tangible there that makes sense all right and then in the column two settings we're gonna hide the entire column on tablet and phone you can see that within the preview on smaller screen sizes that we don't have the button here because you could leave that in there and style it a certain way but it will definitely create a more complicated design if that makes sense so in this case we're just opting to hide the second column on smaller screen sizes to have this beautiful design going on and on desktop we're keeping that button with this nice effect where it goes down in a sticky state all right now that the general row settings and column settings are in place we can add modules starting with a menu module in column one i'm going to take a quick look to see if you guys have any questions see that you are following along want to say hi to everyone that's just joining in if you guys have questions make sure to leave a comment on youtube or on facebook i'll be checking on those all right so over here we've just added a new menu module to column one and we've selected a menu of our choice next we'll select a logo as well and just grab whatever i can find i'm just going to copy the because i can find it in my library i'm just going to copy the logo really quick here we go there we have the logo let me just close and open this again all right and by default a uh menu module has a white background color so we're going to remove that entirely this will just uh leave us with a transparent background color so we don't need to set this to transparent or anything but we're removing it and then we'll style the menu text settings over here in the design tab again we're using the style that's based on the travel agency layout pack so this goes really well with it but you're free to use any kind of styling you want and modify this using the technique um that we're showing within this tutorial so we're using oswald for the menu font a bolt menu font weight we're enabling uppercase let me just grab the color code for the menu text colors it's kind of very light gray color we're using 18 pixels for the menu text um and write text alignments so this will place our text on the right side of the first column and then in the drop down menu settings we're giving a completely transparent color to our drop down menu line color so if i go over here usually you have this kind of top line i'm not a super huge fan of it so i tend to just use um a transparent color for it so it goes away kind of um and we're also using a almost entirely black mobile menu background color so it just has five percent loss of color so it's five percent transparent and in the icon settings um we're gonna use a white color for each one of the icons so basically the way that you use colors over here will depend on the background color of your hero section so you'll you'll definitely want to make sure that this is universal so each one of your pages starts with for instance a darker hero section background color or you can just use a differently styled header for specific pages that don't have a dark hero section background but um you know depending on what color your background is you'll you'll want to either go for a lighter color for your drop down menu for your drop down text and your menu text in general or dark really depends on your hero section background color so over here we're just basing it off the hero section of the travel agency layout packs landing page and we're going for a white on dark and then in a sticky state we're turning this into dark on white which we'll do later on um all right and over here in the logo settings since we're you know going for the light on dark um kind of color palette in a default state i'm also going to invert the image just this will just make it slightly gray very light gray which will look great on a darker background and then in the sizing settings obviously we want to modify the size of our logo i'm just going to assign 40 pixels as the max height of my logo and in the spacing settings we're just gonna need to add some top and bottom padding on smaller screen sizes so tablet and phone the this is where we'll use 10 pixels for the top and the bottom padding for both options and the reason why we're doing that is to have if i go back to the preview to have a little bit of space at the top and the bottom which we don't need on on larger screen sizes so these are the spacing settings and now we can add a button module as well to column two and just add the button some copy over here then i'll move on to the design tab and use right button alignment i'm going to style this button as well use 16 pixels for the text size a white text color let me add a background color as well so this kind of red pink kind of background color i'm gonna use that same color for the border and i'm gonna add zero pixels to the border radio so i'm basically removing it four pixels for the letter spacing and again we're matching the fonts with the travel agency layout back i'm enabling uppercase and over here in the spacing settings i'm just going to give it an overlap so over here you can notice that it overlaps the first um header bar and it also overlaps the second one where it's placed in and to do that we'll add minus 70 pixels and i'm also going to add some top and bottom padding 25 pixels for both the top and bottom padding of this module and this gives us a following result in a normal state and in the next part of this tutorial which is starting right now we'll show you how to make the sticky effects apply so basically we're just prepping the container two important things to mention is the fact that we removed all section spacing so zero top and zero bottom padding so the height of my section is basically zero in the row where we place all the modules in has been turned absolute within the position settings which means that there is no actual space taken up within the section container of the row container itself so it's there it's kind of floating above um the page content um and it doesn't take up space in section container that's why it doesn't show up like if i hover this you can see that the size so you can see you can notice blue on the screen this means that that's the size of the section container which is zero and then we have a row with a transparent background color that's absolute positioned which will appear on top of our page content as you can see over here all right so now we can make the sticky effect apply so the sticky effect is going to apply be applied on the section itself so that's the thing that's going to be turned sticky i'm just going to take a quick look at one of the questions on youtube and then i'll continue can you use an image swap for the menu logo during sticky stroll scroll yes and um you can swap it and i'm actually working on a tutorial that's gonna show you guys how to do it so stay tuned on the elegant themes blog and you'll be able to follow it step by step there all right so i'm going to add a sticky position to my entire section container which doesn't have any height to it because we're using an absolute positioned row so over here within the scroll effects in the advanced tab of my section i'm gonna select stick to top we're using zero pixels for the top offset we can modify this however you want and there's no bottom sticky limit and we're just keeping these two as yeses although in this case we're not you know it's not really relevant but uh just in case you're like modifying some sticky settings on your pages or whatever it's it's good to leave these on and we're also doing a transition from the default and the sticky styles which is you know you can see it it's kind of you can determine that for yourself how slow or how fast it goes within the transition settings of each elements which you can find over here so you can set a duration a delay and a speed curve all right so now that we have turned um the section sticky let me just give you guys a real uh preview over here on my on the page that uh we've been working on so here we have the preview that uh so this is what we've done up until now if i scroll it sticks to the top now obviously we still want to make some changes that will change the look and feel of our row containing the menu one in a sticky state so i'm going to reopen this template over here and we'll start by modifying the background color so we'll go for a white background color in a sticky state i'm going to show you guys step by step each time i make a modification i'm going to show you guys um in real time what that looks like once i save it over here i'm going to go to the row settings and enable this sticky option over here at the top go to the sticky settings and i'm going to use a white background color and let me just save this show you guys the difference all right here we have a white background color for our row next up we're going to change the row spacing if i go to the preview over here of the tutorial you can notice that it's it's kind of shrinking giving it a more pleasant look for the eyes and allowing more content to show up uh within the page so to do that we're going to go to the spacing settings of our row we're going to enable the sticky options and the sticky option on the padding and we'll remove the top and bottom padding by adding 0 pixels to the top and the bottom padding of our row so over here this is without the removed padding let me just refresh you can definitely notice that there's less space being taken up by the menu because we removed that we're also going to add the shadow color to our box shadow over here so right now in the default state we have a box shadow but it's completely transparent and now the only thing we need to do to actually have a box shadow is enable the sticky option and change the shadow color into something more visible which shows up already and we're also going to bring back the positioning of our road to relative in a sticky state so this will just you know allow the road to take its place up again within the section container and not just float on the page itself this isn't a necessary step though because it worked up until now but i do want to add that in there and then we'll change some things about the button and the menu starting with the text because we have a white background right now we're gonna go to the menu text settings enable the sticky option on the menu text color and use a black text color instead we're also going to go to the drop down menu settings and over here we're changing in a normal state we have a back a black background color with white text in a sticky state we have a white background with dark text so we're going to change the mobile menu background color in a sticky state into whites and same goes for the icons since we're using opposite colors in a sticky state we'll want to change each one of these sticky colors into the opposite color being black or any kind of darker color you want all right and i'm also going to bring back the logo which i have inverted by going to the logo settings over here and enabling sticky options on the image invert and bringing this back to zero percent which just removes the filter and the last thing we'll want to do is obviously bring that button down once it's in a sticky state so we'll just open the button settings i'm gonna switch over to wireframe mode really quick so i'll be able to open these settings a little easier and i'm gonna go to the spacing settings and over here so we have this overlap and we can bring this back to zero in a sticky state so it becomes part of our sticky section as opposed to being part of both kind of uh header bars so by just adding zero pixels to the top margin brings it back to the header bar on scroll let me just refresh this and here we have our transparent header and if we scroll it turns sticky and the styles change so we have our button over here that was first overlapping both header bars and everything has kind of been inversed we have a white background color darker text darker color and in the normal state we have this transparent header so that was the tutorial i'm going to take a quick look at the comments section just to see if you guys have any questions um certain i hope i'm saying that right uh i was looking for this just yesterday thank you so much you're welcome i hope you guys were able to follow along and uh enjoy the new disney sticky options i've been enjoying them very much lately you can you can definitely expect more you can definitely expect more tutorials on how to use the sticky options and then on facebook when you click preview why that white page jumping up wait i'm just trying to refresh it here maybe i missed it i mean if you're talking about the space at the top it's you know just because i'm inside the you know uh wordpress website itself so that won't be an issue if you're just you know briefing it outside the wordpress website that you're logged into all right so that's gonna be about it i don't see any more questions so that's it for this tutorial if you liked it please give it a thumbs up and we hope that you're enjoying this ongoing diva design initiative where we try to put something extra into your design toolbox each and every week thank you for watching and i hope to see you in the next one bye you

Channel: Elegant Themes

Views: 20,249

Keywords: divi tutorial, divi builder, divi 4.0, divi 4.0 tutorial, divi builder tutorial, divi theme tutorial, elegant themes

Id: FUy6bdCMPQ8

Length: 31min 22sec (1882 seconds)

Published: Tue Sep 22 2020