Make WordPress Theme Headers Shrink on Scroll

Modern web design favors a top-fixed masthead that shrinks when a page is scrolled downwards. The masthead, also known as the header, is the top of the page that contains the brand logo and navigation bar. Makes sense to keep the header visible at all times and make the header shrink while the page is being scrolled.

How to make your WP theme’s header shrink on page scroll

This method of making page headers shrink on scroll uses JQuery and CSS. The instructions assume your header is already fixed as a sticky to the top of the page. [edit] I’ve added instructions to make the header sticky in case you need to know how to make a sticky masthead.

Read the explanation of how the code makes your website header shrink when the page is scrolled. The code given below targets specific HTML elements. You might need to edit the code so that it works for your theme. For example, for Genesis themes we target header.site-header.

Tip: Use a child theme to ensure these code edits survive theme file updates.

Tip: Install a plugin like Synchi IDE for WordPress to improve your WordPress code editing experience.

Go to Appearance > Editor
Open your theme’s functions.php file
Scroll to the bottom of the file

Add the following PHP & JQuery

/**
* Make Header Shrink on Page Scroll
**/

add_action ('wp_footer','vr_shrink_head',1);
function vr_shrink_head() {
?>

<script>
jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) { 
            $('header').addClass('shrink');
        }
        else{
            $('header').removeClass('shrink');
        }
    });
});
</script>

<?php 
}

Save the file
Open style.css

Add the following CSS

/**
* Masthead - Shrink on Scroll
**/

header.shrink {
  height:50px;
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

Save the file
View your website and scroll downwards.

If the page masthead does not shrink when you scroll the page downwards then you need to edit the code as explained below.

Make the header sticky

If the site header is not staying at the top of the screen you will need to replace the CSS used in step 7 with the following CSS which will make the header stick to the top of the browser.

header.shrink {
  position:fixed;
  clear:both!important;
  width:100%;
  height:50px!important;
  max-height:50px!important;
  min-height:50px!important;
  z-index:999999999;
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

How does the code work?

The JQuery

The JQuery portion of the code tells adds a new class to the HTML ‘header’ tag when the page is scrolled downwards by more than 100 pixels.

For example,

If we scroll greater than 100 pixels from the top of the page
```
if ($(window).scrollTop() > 100)
```
then add the class “.shrink” to the tag ‘header’
```
$('header').addClass('shrink');
```

The ‘header’ tag can be changed to nav, div, p, span or any other tag.

We can even target a specific tag class or ID such as header#nav or div.header such as $(‘div.header’).addClass(‘shrink’); or $(‘header#nav’).addClass(‘shrink’); .

The HTML tag we target, the class we add to the target tag and the point at which the class is added to the target are all configurable by adjusting the JQuery.

If we had a header with the code

<header id="masthead"> Some Logo </header>

And set the code to add the class ‘shrink’ to the header tag with $(‘header#masthead’).addClass(‘shrink’); , then the HTML for the header would change after the page is scrolled downwards by 100px; it would change to

<header id="masthead" class="shrink"> Some Logo </header>

The CSS

The CSS sets the dimensions that the masthead needs to shrink to when the target scroll position is reached. The CSS only applies when the ‘shrink’ class is added to the target HTML tag, e.g. header or div or nav etc…

The CSS we add in this case adjusts the height to 80px and adds a transition animation to make the height change more graceful.

The code doesn’t work, what do I do?

Check that the JQuery portion targets the correct tag. Use Firefox developer tools by right clicking the header region and left clicking ‘Inspect Element’. Use Chrome if needed. You can target a parent div if needed then adjust the CSS portion accordingly.

Leave questions and suggestions below.