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.
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Create Sticky Header and Shrink Logo in 3 Step with Oxygen Builder
Updated: 18 February 2021
icon divider

What we want to achieve here is a sticky header / div / section and a shrink logo image but we're not using the Header Builder element from the Oxygen Builder, but instead using a div or section.

With this tutorial, we will be more free to apply these functions to other elements according to our respective cases and needs because we don't have to use the Header Builder element.

Note: You can still use this tutorial even if you don't use Oxygen Builder, as long as you can edit html & add CSS + Javascript code to your website.

Read: Oxygen Builder, The Best WordPress Page Builder Plugin?

Reference

  1. Shrinking Header from SupaDezign

This article describes how to create a sticky and shrinking builder header. None of the code in this article we used, but we took the idea.

  1. Sticky Section in Oxygen from WPDevDesign

This article describes how to make sections / elements sticky.

  1. W3schools' How TO - Resize Header on Scroll

This article explains how to change the font size when the header is sticky after scrolling down and past a certain size.

Case study

The case study I use is the website header of one of our clients, The Supplier Shop.

Header-The-Supplier-Shop

In that header, there are 2 header lines made of 2 divs:
1. Div1 header top row: menu and contact info,
2. Div2 header bottom row: logo, search and some online shop icons.

The only div2 will sticky the bottom row header. For logos the initial size is 80px high, and the logo shrinks when sticky height to 50px.

Note: Previously, write down the logo image ID, in this case: image-155-1794 or you can change the ID to another ID that is easy to remember because it requires javascript as the target element to change.

How To

  1. Create custom css for sticky.
.sticky {
   position: sticky;
   position: -webkit-sticky;
   top:0;
   left:0;
   padding-top:5px;
   padding-bottom:5px;
 }
  1. Add a sticky class to the target div so that div2 will be the sticky header.
Add a sticky class to the target div so that div2 will be the sticky header.
  1. Add javascript which works if the element has scrolled down more than 20px, it will shrink the logo image height from 80px to 50px. To make the transition look smoother, we added a 0.3 second transition effect.
// When the user scrolls down 20px from the top of the document, resize the header's size
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("image-155-1794").style.height = '50px';
document.getElementById("image-155-1794").style.transition = '0.3s';
} else {
document.getElementById("image-155-1794").style.height = '80px';
}
}

The Result

From these three steps, the result is like this:

shrink-logo-image-in-oxygen-builder

Closing

That's a short tutorial on how to make the logo image on the header smaller / shrink on the Oxygen Builder. This tutorial can also be used for other purposes with certain modifications according to your needs.

If you have suggestions for improvements to this paper or other comments, please leave your comments below this article.

Hadppy Digitalyze 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