This tutorial provides the steps to set up a fixed transparent header in Oxygen which becomes opaque on scroll.
Edit your Oxygen template and add a Div.
Advanced > Layout: Set Display to block and Position to relative.
Inside the Div, either add a Header Builder (under Helpers) element and build your header OR add one from the Library.
Ensure that there is no background color.
Advanced > Size & Spacing: Set Width to 100%.
Advanced > Layout: Set Position to fixed with 0 Top and Left values.
Add a class of say, site-header.
Add your “hero” Section inside the Div below the Header. I have changed the top padding for this to 200px in my demo page.
Inside this Section, add Heading, Text, Images and anything else you want to show inside the hero section.
Add a Code Block below the Div.
PHP:
<?php
// echo "hello world!";
?>
CSS:
@media only screen and (min-width: 601px) {
.admin-bar .site-header {
top: 32px !important;
}
}
If you want the content of Header to spread between the left edge and the right edge, add
.oxy-header-container {
max-width: none;
}
Add other sections/elements per your design needs below the Div.
Let’s add some Javascript to automatically add a class of scrolled after the user has scrolled a certain distance (150px) and to remove it when scrolled to the top of the browser.
The reason for not using the built-in Sticky option in Oxygen is because I found this to be a jumpy and not smooth when the header becomes fixed.
In the Code Block element’s Javascript area, add
window.addEventListener("scroll", function() {
// let scrollpos = window.scrollY;
if (window.scrollY >= 150) {
// add_class_on_scroll();
document.body.classList.add("scrolled");
} else {
// remove_class_on_scroll();
document.body.classList.remove("scrolled")
}
});
In the CSS area, add
.scrolled .site-header,
.oxy-nav-menu.oxy-nav-menu-open {
background-color: #000;
z-index: 1;
}
Related:
Comments
Provide a URL of your site/webpage if something is not working.
8 comments on “Transparent header in Oxygen”
Thank you for your awesome tutorials.
Can you please give me a tip how i can fix this error alter I apply the javacript?
“SyntaxError: rededlaration of let scrollpos on line #1”
Thank you!
You are welcome Bernd.
Can you try this JS? https://pastebin.com/raw/gfkksv5j
Thank you for fast reply. Same error. I play arround with Oxygen and it could be possible that I use this tutorial before. I deleted all component in the structure and began from scratch. Same error. Perhaps the declaration is not deleted.
Where is the error appearing? Backend or frontend (in the console) or both?
Backend, Alfter copy and apply.
Does it work fine on the frontend?
Oxygen is just too complicated for it to succeed in its current incarnation, and I’m speaking as someone who actually gets these high level tutorials. Developers may love it, for good reason, but I just don’t see it competing with Elementor or other builders that can offer the bells and whistles functionality built into their core or add-ons.
Oxygen needs to invest more into creating amazing modules/widgets. They need to blow us away with great widgets, and blocks, and templates/themes, etc.
They got their work cut out for them. But they do have some amazing power benefits in their own right. However, when the only thing that’s popping up in the Facebook groups about Oxygen is how to do some cool thing, “just follow these 17 custom steps,” I’m telling you, it’s not going to work!
version 2.1 includes several enhancements to the header incl. transparent headers.
You can download its alpha and try this out.