How to Apply Headroom.js on WordPress and Oxygen Builder

This article explains how to use Headroom.js in WordPress and Oxygen Builder, but you can also apply it to any website.
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
headroom js pada WordPress dan Oxygen Builder
Updated: 20 August 2021
favico digitalizer

What is headroom.js?

Headroom.js is a javascript that functions to hide the header when we scroll down and bring up the header again when scrolling up.

1. Why we need it?

One of the current trends of websites is to use a fixed header to make navigation easier for visitors, but this technique will reduce the width of the reading area (viewport) and may reduce the convenience of mobile devices that have a smaller reading area.

By using headroom javascript, visitors who are reading and usually scroll down. The result is we will have a wider reading area and feel more comfortable

The Digitalizer My ID (Bahasa Indonesia Version) website also uses a headroom java script for the header menu.

2. Reference

You can find out more about the headroom.js maker on this page including a description of the settings and a download link for the script.

Below I make the steps using Headroom.js in WordPress that uses Oxygen Builder, but in principle you can use it on any website.

3. Installation steps

  1. Add html script to initiate
<script src="https://unpkg.com/headroom.js"></script>

<script>
var headerx = document.querySelector('header');
var headroom = new Headroom(headerx);
headroom.init();
</script>
  1. Add css to create fixed header and transition effects
.headroom {
will-change: transform;
transition: transform 200ms linear;
}

.headroom--pinned {
transform: translateY(0%);
}

.headroom--unpinned {
transform: translateY(-100%);
}

header {
  position:fixed;
}
  1. Make sure header element has id "header" and css class "headroom"
Display header element panel on Oxygen Builder with header ID and css classes headroom
Display header element panel on Oxygen Builder with header ID and css classes headroom
  1. Save and look at the front page, clear cache if using a cache plugin

Below is an example video of the results application on the header, more attention to the header (the top is blue with the digitalizer logo).

4. Conclusion

That's how to apply Headroom.js in WordPress using Oxygen Builder. If you have questions or responses, please use the comments column below.

Happy digitize your life!

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest Article

How to Create an Off-Canvas Menu with Oxygen Builder
This article explains how to create an off-canvas menu on a website using the WordPress CMS and the Oxygen Builder plugin
Read more...
Create Sticky Header and Shrink Logo in 3 Step with Oxygen Builder
This article contains a tutorial for those who use Oxygen Builder to make sticky headers and logo images shrink.
Read more...
How To Create Dynamic Slider with Flickity in Oxygen Builder Repeater?
This tutorial explain how to create dynamic slider using flickity combining with Oxygen Builder Repeater element.
Read more...
Flickity on WordPress & Oxygen Builder
This article explains how to create sliders & carousels with flickity on WordPress & Oxygen Builder or any other website.
Read more...
Convert Website to Oxygen Builder (Case Study)
Do you want to convert a website using Oxygen Builder? This article are examples of cases and performance improvements from the optimization results.
Read more...
Oxygen Builder, the Best WordPress Page Builder Plugin?
This article contains an introduction to Oxygen Builder as a page builder plugin in WordPress.
Read more...
5 Image Formats for Website Optimization
This article contains an introduction to several image formats that are commonly used on websites so that we can choose the most optimal one.
Read more...
COMPLETE PACKAGE OF WEBSITE DESIGN & DEVELOPMENT
Digitalizer offers website design & development services for company profiles, online shops, event organizers, educational institutions or other fields. You don't need to think about domains, web hosting / servers, DNS, email, design, development, security and other technical issues. Just prepare your website content, we do the rest.
All website design & development packages include 1 year maintenance!
Free Consultation
Back to top
logo digitalizer - en
© 2011 - 2021 Digitalizer My ID
cross