Overlapping Header with Sticky Expand/Shrink Animation in Oxygen Builder

hello and welcome to design with cracker today we are going to take a look at how to create this type of header you see it overlays on top of the top bar and then when you scroll it is sticky but then it animates and fills the width of the screen so we're gonna go to oxygen builder uh this is um a bit different theme i'm using swiss knife so that is why i'm having this type of theme for my builder um so the first thing we're gonna do is normally if you were to do this for a live site you will need to create a template for the header but for the purpose of this tutorial i'm just going to use a sample page to create this header so the first thing i'm going to do is add a section and i'm going to change the color of my section so that i can see what i'm working with and the next thing i'm going to do is to add a header now so the header is below the section and i want to change the background color of the header to a little bit of off-white color so i can see what i'm doing to separate it from the white color of the page and the third thing i'm going to do is to create another section so that i will have content to enable scroll i'm going to make that section a height of 200 viewport height and then i'm going to put a background image so i have an image here in on splash.com i'm going to copy that image address and then go to background and paste that url so it gives us a scrolling distance so the next thing i'm going to do is go to this section i'm going to add some text and then i'm going to add an icon and then selecting the section i want all the text and icon colors to be white and i'm going to stack them horizontally and align them to the middle i like to change this icon to something more symmetrical like this okay and then i'm going to reduce the size of the icon and then give it a margin left of say 16 pixel to separate it now onto the section i'm going to horizontal item alignment i'm going to set it to space around i'm going to set the height of the section to 80 okay and then because of the default padding of the section this text and the icon are being pushed down which is the the default padding is 75 pixels i'm going to just change that to 16 pixel now i'll select my header builder and i want it to overlap but before we do that let's change the size now if i collapse this and this right now our header has the same width as the width of the screen but we want it to be the same width as the page so we're going to go to settings global styles width and breakpoints and here you see that the page is 11 20 pixel so we're gonna go back make sure you select the header builder and then go to advanced size and spacing and set a maximum width of 1120 pixels now if we hide this and this you'll notice that our header moves to the left it aligns to the left that is why i gave it a background so that i'll be able to see the difference between the header and the page background i'm going to go to the header to align it to the center you change the margin left and the margin right to auto and automatically the header is being centralized the next thing you're going to do is we want to you know move this header up to overlap on this section now there are two ways we could do that we could give it a negative margin top of negative 40 to take up half you know of the space since the section has a height of 80 pixels but if we change the margin of the header we might run into problems later on especially when we are working with responsive mode so i'm going to take that out and then i'm going to change the margin of the section so that it pulls this up and then if you go to size and spacing you realize that sections don't have the margin settings only paddings so what are we going to do so we're going to wrap that section with a div so i'm going to wrap it with a d and then with that div selected i'll go to size and spacing and change the margin uh bottom to negative 40 and that pulls up the header now um so let's save and see what we have at the front end now we can see our header and the reason is there is nothing inside the header so we're going to go back and then we're going to add see an image i'm going to save that image to 80 pixel height and set the width to auto i need to put a logo here so i'm just gonna take from this copy this image address from our splash.com and then i'm gonna paste it here and i would like to pop in a menu so let's add a menu now um i want to move that many to the row right okay now if we save now and refresh this page so we see our header now the problem is it's pushing down the section so we can see the page background so we need the section to cover up this space let's go back to do that i'm going to select the header builder go to overlay and then set the header to the overlay at above 768 pixels let's save and then refresh okay so the section has you know cover up the space but one challenge we have is that our header has lost its color now by default oxygen overlay header does not have a color because it's meant to be an overlay header but in this case we need the color so we're going to go back now before we do that let's just inspect the header so um if you take the inspection tool and select the header you're going to see that it has a class of auxi header container now let's close that or i could just copy that class i'm going to close this let's go back so we're going to use that class and apply a color to it there are two ways we could do it we could create a style sheet by adding style sheets and let's just call it header style and then we just put in that class i put a dot as the class selector and then i'm gonna write background white but i don't want to use that method so i'm gonna delete it and show you a different method so instead of using a stylesheet for that i'm going to use a selector and then i'm going to add a new selector and just add that auxy header container and say ok now that will give me the ability to be able to style it visually so we have the selector selected and then you can see it here so i'm going to go change the background color to our off-white so now a header has a background color so if i refresh this so you're gonna see that our header has a background color but then let's see that sticky header i'm gonna go back to the structure panel go back to the header builder sticky enable sticky header let's test that so if we scroll all the way down the sticky header appears now why does it waste time to appear because the scroll distance is set to 300 now if you remember the height of our oh i just noticed something a section is not showing because this i mean the top bar is not showing because the section here has gone over it to solve that we're going to select the section you can see it wasn't oh it's showing here but inside the inside the builder it is not showing unless you hover on it to solve that i'm just going to select layouts and set the z index to one okay so let's just put it to be on the safe side now we're talking about the sticky header so uh the sticky header has a scroll distance of 300 pixel but remember that our section here the top bar was 80 pixel in height and we had a negative 40 pixel margin to pull this up that means the distance between the top of the menu or the header to the top of the top bar is 40 pixels so we need the sticky header to activate as it touches okay the top so i'm gonna go back to the sticky and change it to 40 pixels now if i scroll up it just sticks okay so that's what we want i'm gonna save that and then i'm gonna preview okay so let's see great so if all you needed was to have this type of header that is sticky then that is all you need to do we're gonna take it one more step further to add the animation for the animation we are going to use css i have the css code in pastebin and i have provided the link in the description below so you're going to copy the css code go to settings uh style sheet and with the style sheet we have already created i'm going to paste now if you take a look at the css you're gonna see header id and then you're gonna you're also gonna see header row id those are the two important things you should take note of that means you're going to replace this header id with your header id and you're going to replace the header row id with your header row id let's take a look at it so you go to structure panel and then select your header builder and this is your header id so i'm just going to select it ctrl a copy and then i'm going to go back to my style sheet and then i'm going to replace my header id don't forget to let the hash to remain okay so i'm just gonna do that replace all the header id okay i'm done replacing all my header ids the next is to replace the header row id so this is your header and this is your header row so you just go ctrl a ctrl c copy it go to style sheets and then replace so i think we have that in two places now i'm going to collapse the editor and then i'm going to scroll so as you can see the header animates and shrinks at the same time and if you notice the logo also shrinks and that is because we have a css here so this um auxy header has a css that shrinks the image to any pixel that you choose now let's um save that and take a look at the front end now something is not right here so if you notice if we move this up you can see that the logo is kind of jumpy have you noticed it's kind of jumpy and that is because our header changes size abruptly and did not animate so that is why that animation on the logo is jumping so we're gonna fix that now if you take a look at this you're gonna see an instruction remember to set aux header row height to a higher value in settings so you're going to go back to the object header row and then i want to set it to a height of 80. now if we okay you can see that the animation is smoother we're going to save that go to the front end and refresh and then so you can see that the animation is smoother so that is the end of our tutorial please like and subscribe invite others to watch if you enjoyed this tutorial and if you have any questions ask and i'll be sure to answer that's all for today until next time have a great day you

Channel: Design with Cracka

Views: 3,299

Keywords:

Id: xWjkE3OH11g

Length: 13min 7sec (787 seconds)

Published: Sat Feb 13 2021