Transparent header in Oxygen

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: