Make Anything Sticky in Oxygen + FREE Sticky Utility Classes!

More about this video

Want to learn how to make anything sticky in Oxygen?

In this tutorial I’m going to show you:

– How to make something sticky by adding a single class to it
– How to use modifier classes to adjust the stickiness
– How sticky elements work from a structural standpoint
– The #1 thing that confuses people about sticky behavior

After this tutorial you’ll be a master of stickiness in Oxygen 🙂

Note: If you structure the page incorrectly, sticky either won’t work or will have undesirable effects. Make sure you watch the part of the tutorial where I talk about proper page structure.

*** JOIN THE INNER CIRCLE ***

Want access to deep-dive Oxygen tutorials and agency trainings at a no-brainer price? Check out https://digitalambition.co/inner-circle/

*** GET THE FREE STICKY UTILITY CLASSES ***

Want the free copy/paste utility classes? Go to https://digitalambition.co/watch/make-anything-sticky-in-oxygen-free-sticky-utility-classes/

Video Transcript

0:00:00
What’s up everybody welcome back to the channel so today I’m going to teach you how to make anything inside of oxygen Sticky if you don’t know what sticky is I’m sure that you’ve been maybe reading a blog post right and as you’re scrolling down the page You’re reading the blog post. There’s something in the sidebar and it’s stuck and it’s following you down the page And when you get to the end of the blog post it stops following you We’re going to show you how to do that inside of oxygen. It’s actually very easy I’m also going to give you some copy and paste utility classes to put into your style sheet in oxygen That’s number one going to allow you to make any element sticky with one class It’s going to help you modify that stickiness and a few ways that we’re going to talk about with a few different classes And it’s just going to make your life easy in general I’m also going to show you kind of structurally how sticky works and we’re going to cover one of the things that tends to Confuse people and trip them up and they put the sticky class on something or they put sticky code on something They expect it to be sticky and adjusting sticky I’m going to show you why that might be happening and how to fix it and how to move forward all right So let’s go ahead and hop into everything. I’ve got my new handy dandy software So I actually don’t have to do any cuts. We can just do this once through So I recently did a tutorial inside of the inner circle my inner circle Link for that is down below on how to do a blog post template that looks like this So we built out this nice little hero section We did a three column here. Why don’t we look at this on the front end?

0:01:33
Yeah, this is all right, so we we have this hero section We built the three columns the first column is a table of contents that Dynamically generates based on the heading to level the h2s in the article the article is written in Gutenberg So it pulls that article into the template dynamically and then we have the categories on the right hand side and just showed how to maybe create like a little Categories menu. I also showed how to create related posts at the bottom That randomly pulls from the same category. So a very you know really good looking practical blog post template We did a whole tutorial on it. What I want to do now I want to leverage this template and I want to show you how to make something sticky in a practical way What we’re going to do is make this table of contents sticky so that it follows people as they are reading the article And you’re going to see two these act as anchor links So you can click on them and then when this is sticky it actually follows the progress of the article in the sense that this little blue Highlight will highlight the actual section that you are on which is very cool and very powerful So let’s go ahead and dive into the actual template. I’ve got the template here. I’ve got the structure panel open So you can see how this is this is our main grid wrapper. This is built with CSS grid It’s built with oxygen inches utility classes and so I’ve the center column I have the left column. I have the right column. I have the table of contents element inside the left hand column What I’m going to do is I’m going to go to advance now before I use the utility classes I want to teach you how sticky works and sticky by the way is very cool It’s like a cross between position static or position relative in the sense that if we look at it on the screen here You cannot tell of course. It’s not even sticky yet. Why don’t we do that after the fact that that might be better That’ll make more sense at that point. So let me go to advanced Custom CSS. It’s two lines of code. That’s all you need to do So I’m going to do position and we’re going to do sticky and I’m going to do top zero The real key here is that because everybody knows position sticky for the most part They forget that it needs a top left right or bottom measurement So if you don’t put a top left right or bottom position on it It’s not going to be sticky. I’ll show you that now. So let’s take that off So I told it hey buddy. Okay, let’s just mess up the whole template. I said hey be sticky All right, so we’re going to save we’re going to refresh on the front and it’s not sticky But at the minute I go in I’m going to click it again. We’re going to go to advanced custom CSS The minute I put a top left right or bottom on this I Hit save and then we reload on the front end. It’s sticky Now you’re going to notice that it stuck to the very top and it’s actually so high that it’s behind the WordPress Admin bar so what we want to do is actually control the spacing from the top So if I change the zero to like 5% and then save and then we go back to the top and refresh and I come down You now see there’s a gap between the sticky element and the top of the page which is very cool and very useful Now let’s we’ve seen how it kind of works from a code perspective Let’s take all of that off. Let’s see how the utility class works So I’m going to go to my managed style sheets. I’m going to go to my style sheet I’m going to come down here and I’m going to show you all of these sticky elements right here Let me go ahead and see if I can zoom in on these all right the main one does the Like 99% of the work the others all just modify the sticky behavior in the sense that if you wanted to turn sticky off at certain Breakpoints. That’s not always necessary, but sometimes it’s necessary Then you can definitely do that there if you wanted to change the top position You can use these classes to change the top position. So we have a small is 2.5% medium is 5% and large is a 10% gap And then you can modify these if you want to as well But let’s go ahead and put these to use so I’m going to go back to my template. I’m going to grab my Table of contents. I’m going to go up to the classes and I’m just going to say Be sticky by putting the sticky class on there and then we’ll hit save We’ll go back to the front end. So I put one class on there and guess what? It’s sticky But it’s too close to the top. So now I need to modify it right?

0:06:02
So now I’m not going to remove the sticky class I’m just going to choose one of the modifiers So in this case I’m going to choose M I’m going to hit save and then I’m going to go back Refresh and I see that I now have a medium gap of 5% gap from the top of the page That’s it. That’s how easy these utility classes make this I can do that to literally any element all right Now a couple things one that trips people up people will grab my utility classes and this isn’t just in Stickyness right? It’s the breakout utility classes or the max with utility classes I’ve been getting message after message after message people pace these utility classes in then they go to try to apply Them to something like the sticky top large sticky top double-l Okay, I’ve put that in right is the small in there no So if I wanted to do the small gap I don’t see it in the list and people are like I can’t use it No, you just haven’t used it yet. So it’s not being recommended to you Also if you and the minute I put this in so let’s use sticky top S Now let’s take sticky top S off of here. I want to show this because I literally I’ve gotten dozens of emails about this Now when I go to do sticky top the S is there as a suggestion All right, so once you’ve used it one time it will then start showing up in the list or What you can do ahead of time is you can go to manage selectors and you can go to add selector and you can do sticky top double-l And hit okay, and that will load the selector in so that it starts showing up in the panel even before you’ve actually used it That is like if you’re gonna do a bunch of them you might want to do that ahead of time But I just use them as I go and then they start showing up So not a big deal just a lot of people were getting confused Because they didn’t they they thought by putting it in the style sheet that it automatically make it show up in the drop-down list And that’s not the case So next thing we need to do we’re gonna talk about structure and the one thing that tends to trip people up when they try to use Sticky alright, so I’m gonna create a new section on this blank page. I’m gonna create a div I’m gonna make this two columns, but it’s gonna be a large column and then a small column So three two I’m gonna add two divs to that one div and I’m gonna duplicate it’s gonna make another div I’m gonna put a gap of Extra large and then at the large breakpoints. We’re gonna do one column And we’re also gonna talk here about mobile stickiness all right because this is an important point to cover So this is a traditional layout where I might have long content and then something on the side and anytime by the way You have long content that needs to go on a page I recommend considering something like this where you have the content confined to a kind of a narrow column and then you have something on the side of it that’s kind of interactive That really helps break it up like don’t just take this long piece of content and throw it on a page definitely not full with But I would just not recommend putting it by itself like put something next to it and then a sticky element next to it is Perfect because it really gets people’s attention and you can put something very useful right there So what I’m gonna do is put a text box in this first one and I’m gonna go to Lore on yet Please add that. Thank you. I’m gonna go to Laura and grab some paragraphs here and Just something that’s super long right? That’s not even to well. Why don’t we make it even longer right here?

0:09:31
We go good so that’s a lot of content and the clients will do this for you all the time all that all that content needs to be there Find a way to make it work, right? Okay, so I found a way to make it work We do it in a column like this. We put something sticky next to it. What are we gonna put next to it? Well? I think a card like a call to action card would be great. So let me add a div here And I’m going to I’m not gonna do all the classes that I would normally do don’t pay attention This is not best practices for creating a card. I’m just gonna do something very quick I’m gonna whip something up basically All right, so I’m gonna put a background on this like a big vibrant blue color and Then I’m gonna put a padding class on it of like large and then I’m gonna do a heading Let’s do oh not a heading class. I’m gonna add a heading element. So let’s add a heading to this Let’s add text to this. Let’s add a button to this Okay, and the button is gonna get a class of alt C button alt so we can like actually read it By now, I actually don’t like how that looks, but you know We’re whipping something up as I said text light on my entire card Double click this by this now. Okay, we’re gonna make that in h3 and then You should really consider buying this now or go to Subscribe to the inner circle. There you go. Little call my own call to action up in up in the the middle of the tutorial here All right, we’ll put some owl spacing on this owl WS All right, get a little small spacing there. I think that’s good. So there’s our little call to action Why don’t we center all of that that might work as well?

0:11:13
Cool so that we want that to follow somebody down the page So let me close our blog post check this out on the front end there we are So I would really love for that to just follow the person down the page So they’re gonna be reading this content, but at any time they can click that button and they can buy now That would be cool, right? So how do we do this? I grab my element? There it is. There’s my card, right? Let’s label this so we can see what’s going on here big caps card There’s my card my CTA card and I’m gonna go over here and put the class of sticky on it So technically this thing should be sticky. It should follow me down the page except I’ve done something wrong so I’m gonna hit save and I’m gonna go the front end. I’m gonna refresh it is not sticky and you’re like how is this? How is this possible? I’ve put this class on other things they were sticky. It was working I put it on this thing it ain’t sticky. It ain’t working what they don’t know what to do So I’m gonna show you and it’s this rule right here Whenever you have something positioned sticky It needs a parent container that is big enough to allow for the movement of the sticky element If you look at how we structured this we have the outer wrapper grid We have two divs inside of it. This right-hand div is the same height as the CTA card There is no room for that CTA card to be sticky So either this div doesn’t need to exist watch this I pull that card out of that div and I delete that div And then I hit save and we will have a sticky element Right because now it’s inheriting the main grid wrapper as its parent which obviously is very large and has plenty of space or The other thing that we could have done. So let me add that div back and let me pop Well that div needs to be out here Not not way out there. Let’s see if we can get it in the right. Yeah, right there And then the card needs to be inside it. This is the way that it was. Let’s see if I get the card inside it. There we go All right, so now what I can do is I need that div that column div to be the same height as our main wrapper So I grab the main wrapper and I put a stretch class on it and that will stretch all the columns inside of that And you see it pop to being sticky But if I grab that div right there you can see the blue outline it goes all the way down now That’s why magically this thing started being sticky So if I hit save and we see it on the front end we now have stickiness even though it wasn’t sticky earlier That is one of the biggest things that trips people up about position sticky They put sticky on something that’s in a parent that doesn’t have any room for that element to actually be Sticky the sticky element. That’s why it stops when you get to the bottom the sticky element will not break outside Of its parent container. So in effect the sticky behaves like a let me let me go back and show you because this is what I was going to tell you earlier So if I’m moving like this You can’t tell that that’s sticky right because it behaves like a position static or position relative element and things will actually Flow around it properly But when it’s sticky it actually behaves like a position static element and it will by the way Go over the top of other things or underneath other things. So let me show you that real quick Oh, and then we need to talk about mobile responsiveness. So I’m gonna add a heading below this Below that please. Thank you. We’re actually gonna put a margin bottom on this of of M All right, I will just leave that there and let’s see what happens So now we have an element that’s sticky and something below it that’s not sticky Look at that it covers it up and passes it by Right, which is very cool like it that’s exactly the behavior that we would expect now That’s not a good use case. I wouldn’t recommend putting things underneath sticky elements and creating this overlap That’s not something I would recommend, but it’s cool that it doesn’t like break the stickiness the sticky element like ignores that that thing is in the way and You know completely still works, which is fantastic All right, so that was one thing the second thing is how does this behave on mobile and to show you this I’m actually gonna flip flop these What if we had the sticky element on the left hand side and we had the big content area on the right so that when the stacks We need to see if our sticky element and I need to switch my gap of my columns here So I’m gonna go to columns now the left side is gonna be smaller than the right side so I’m gonna go two three All right, we’re gonna see if that sticky element actually goes over the top of our main content because that would not be desirable so I’m gonna go to the Breakpoint here remember I said L is gonna be one column So now we have one column L actually let me do this on the front end So there’s my refresh page I’m gonna come down and there’s my there’s where it breaks, okay?

0:16:26
So now if I scroll Look at that it does not except it does still kind of go over this heading which is why I said don’t put things below sticky elements So let me delete that now now that you’ve learned that lesson. Let’s hit save and let’s refresh and Let’s go to where it breaks notice the stickiness does not affect the column. Did we turn sticky off? No, we didn’t turn sticky off. Why is it not going over this? It’s because its parent is no longer big enough to move that column stacked and that column doesn’t have a height set on it It’s just auto responding to what’s inside of it. So if we go like inspect the element here I don’t I hate when my inspector panel is off to the right hand side and All right, I’m not gonna mess with it But if we look at we can we can look at it on here. So I’m gonna open that up again All right, so this is the this is the parent right here. I’m gonna shrink it. So here’s the main body you can see it’s outlined in blue Here is the first column look how small it is right? There’s no room for that sticky thing to actually move So it’s not gonna interfere with the content down here if you were in a situation where Where for some reason the sticky element is misbehaving on a mobile device or something like that You can always turn it off and I gave you in our utility class dial sheet here by scroll down I gave you some off classes so I can say sticky off L So at the large breakpoint I want that sticky to turn off and so I can just pop that in I’m not gonna put the period in there and I’m gonna hit add class and what we can see the way that this is turning it off So you turn it on by setting the element to position sticky you turn it off by resetting the element to position static So you’ll see in the off class here. Let me zoom in on that. So off class in or L They all just set the position to static at these different breakpoints for you So that’s super powerful if for some reason you need to turn the sticky off But in a lot of cases if you structured things properly the sticky is not gonna bother anything else Unless you’ve broken best practices by putting something below it in the same parent container that definitely might cause problems So that is it. Let’s let’s go ahead and go back to screen here Position sticky super useful. I use it all the time on websites I especially use it when like I said there’s long content that needs to be on a page I want to put something else next to it to kind of make it interactive Especially if I’m able to bake a call to action into that thing So it’s kind of like sitting there encouraging the person the entire time they’re interacting with this long content It’s like hey click me. Hey click me. Hey you ready to click me like it’s really cool They don’t have to go searching for a call to action if they’re persuaded to take action by that long content area It’s just very practical and very useful. So if you have any questions don’t hesitate to ask I respond to every legitimate comment, let’s say that that’s put down below I will give you the link to download the utility classes Don’t forget that you have to use them at least once before they show up in the selector panel Or you can add them manually via the selector panel either way you’ll be good to go That’s it for me today. I’ll be back with another great tutorial Make sure you’re subscribed to the channel make sure that you liked it make sure that you shared it and drop a comment Even if you don’t have a question just drop a comment of support. All right. I’m out. Peace