This tutorial provides the steps to set up a fixed transparent header in Oxygen which becomes opaque on scroll.

Live Demo

Step 1

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;
}

Step 2

Add other sections/elements per your design needs below the Div.

Step 3

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:

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • 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!

  • 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.

  • 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!

  • magnifiercross
    >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: