Transparent header in Oxygen

Updated on 19 Jul 2021

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

Live Demo (only the homepage)

Step 1

Edit your Oxygen template and add a Div. In my demo site, I edited the sitewide Catch All Main Template.

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.

Step 2

Add your “hero” Section on your Pages as the top-most element (I did this for the “Home” Page which has been set as the static homepage at Settings > Reading). I changed the top padding for this section to 200px.

Inside this Section, add Heading, Text, Images and anything else you want to show inside the hero section.

Step 3

In a Stylesheet at Manage > Stylesheets, add:

@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 4

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.

Add a Code Block as the very last element in the Catch All template.

PHP:

<?php
    // echo "hello world!";
?>

JavaScript:

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 a Stylesheet at Manage > Stylesheets, add

.scrolled .site-header,
.oxy-nav-menu.oxy-nav-menu-open {
    background-color: #000;
    z-index: 1;
}

Related: