Make Anything Sticky in Oxygen + FREE Sticky Utility Classes!
ฝัง
- เผยแพร่เมื่อ 3 พ.ย. 2024
- 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 digitalambitio...
** GET THE FREE STICKY UTILITY CLASSES **
Want the free copy/paste utility classes? Go to digitalambitio...
Hey, while you're here, sticky your mouse cursor to the thumbs up button and subscribe button :)
when he is talking about how to show new css classes you add, that was literally me. As a new Oxygen user I didn't know why they didn't auto-populate. I asked on the Facebook group and this legend replied to me in like 20min!!
😎
Kevin, your tutorials are great! The utility class knowledge I've learned thus far is off the hook. :)
Best oxygen builder content by far! Please please please do a tutorial on best practice for building a menu in Oxygen !!!
Kevin, you never tire of knocking them out of the park. Keep it up mate!
Very good. I did'nt know about the need of room space to allow stickyness. Thank you for all your great tutorials
Thanks, I'm glad you covered what happens to the parent div when things stack
WOW another super tutorial! Thanx! Note that link to free resource is not working anymore. You are very very kind to share these knowledge! :)
Awesome tutorial. I don't know how many times I came to this stick thingy issue. Thanks alot..
Great tutorial! Can be super transferred to other builders.
Kevin, those are great tutorials, especially this one. Thanks a lot for sharing.
You‘re the man. Great stuff as always.
Great content. Can’t wait to see more. Trying to move from Elementor so these vids are helping
Awesome, thank you. Be safe
After the initial duh moment, it makes complete sense as to why I couldn't make it work. Thanks 👍
Thanks for another great tutorial! I noticed the breakout utility classes from your stylesheet, will you be covering these in another tutorial?
Definitely
Dropping a comment of support.
Really appreciate you sharing your knowledge!
Great content as always!
Been learning a lot since I bumped into your channel.
Thank you!👊🏻
Hi. How to make the parent div to stretch? Would you mind sharing the c-stretch class?
There are a few ways. Depends on how you’ve structured things. Have a link?
very useful - thx a lot
Thanks!
Another belter, thanks!
Thank you Kevin for your greats videos !
thank you
thanks for another awesome video! It would be interesting to see how you implement a responsive header/DIV that dissapears on scroll down and appears back again on scroll up :)!
Awesome stuff. Thank you!
This was great, thank you. But, I don't think your link to the utility classes is working any more?
Everything is in AutomaticCSS now
This is great tutorial, did not know this before. At the last minute of the tutorial, the blue sticky header on mobile, is not working because there is no room big enough to allow the sticky behavior. What is the purpose of adding that sticky off class on the large screen? Thanks.
Excelent, as always!
Thank you!
can you please do tutorial for sticky header (shrink when scroll down, then after some px go hide, then when we scroll up it will show again in small header size)?
Love it mate! Where's the "highlight part" though? 🧐
?
@@Gearyco 2:36
Great info !
Great tutorial! The link to your classes is broken though.
We moved all the snippets into the inner circle
Wonderfull!! I would love to know how to make it fade in for mobile? or maybe not have the content split in columns, just have the main content and have a sticky button that has the content? jut like focus mode in LMS plugins. Thanks again
Would need to see an example
Hey, Comment of Support... LoL! Great work I really enjoy your content.
Hi Kevin. Where have the utility classes gone ? Broken link. Thanks.
They are in the inner circle as well as automatic CSS
Thanks for this super useful content, I really appreciate your work and that you share this to everyone. Followed you in this video but the CTA wont turn sticky if the page inherit my main template with a sticky header. If I don’t let the page inherit the main template, the CTA becomes sticky just as in your video. Any suggestion to why that is and how to fix it?
Hey Kevin, the utility classes are great! I'm running into an issue where they work perfectly in the builder, but don't work on the front end. Have you run into that before?
Shouldn’t be an issue, no
Thx, I knew how to do this, but one thing that I have trouble with is getting mobile versions to look good. Menus aren't great, columns are that great, text size already requires tweaking, etc. I think this has to be the Number 1 issue for people, since data shows that 95% of the audience are connecting via phone. I think this is something that isn't talked about enough
Watch my page building 101 course it’s free
I know this is old, but in case you are still up to answering Oxygen related questions: I have a mobile menu that I want to make sticky, so I add the CSS code to it and it works, no problems. However, I also have a sandwich menu icon in the mobile menu that when clicked, an oxygen modal opens. It still opens normally when the mobile menu is sticky, but when I attempt to close it (either by pressing the closing button or the modal backdrop) then I return to the top of the page, which is not desirable. This is probably a modal related issue, but since it only appeared after I made the mobile menu sticky, I was wondering if you know some solution to it. Thanks for the great content!
Note: I contacted oxygen support for this and will update with a reply here about what happens
Stick it to the the man
Hey! How did you do (16:12) to set one column in the mobile version?
This is super old. Watch some newer ones and you’ll see. Look for grid on this channel.
Does anyone know what the current year code/shortcode is for the copyright in the bottom that you fill in the text field in oxygen?
comment of support
Hello, say there are 2 cards both within the same column. The 2nd one has a 200px margin top. Both cards want to be sticky. Only when the 2nd one hit the 1st one. I want it to push the 1st away and this 2nd one becomes sticky instead of going tough underneath of the 1st one. It that possible?
It’s possible but requires some structural changes
Hello the link is broken :(
Hi Kevin!
Would you change the language of the subtitles from Vietnamese to English?
Unfortunately, I'm deaf and can't hear what you're saying.
I understand written English better than spoken English.
Thanks You!
The subtitles are in English. You might have to switch it in your player
Summary: Use this custom css:
position: sticky;
top: 0px;
You're welcome.
And then it doesn’t work and people wonder why. Hence a video teaching them how sticky elements work and what causes them to not work.
Create your own channel and you can post all the useless 10 second videos you want that don’t actually teach anyone anything.
@@Gearyco didn't know you'd hate a summary so much lol
Hello! Check the email with a offer (ConveyThis)