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
icon divider

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 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 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.
Read more...
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...
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
logo digitalizer - en
© 2011 - 2021 Digitalizer My ID