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.

  1. Go to Appearance > Editor
  2. Open your theme’s functions.php file
  3. Scroll to the bottom of the file
  4. 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 
    }
  5. Save the file
  6. Open style.css
  7. 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;
    }
  8. Save the file
  9. 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.

27
Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of

I enter the codes as instructed. The header stayed during scroll, but didn’t shrink. So, I deleted the codes in both function.php and style.css. Now, I am given an error message and cannot access the webpage, nor anything inside the editor. When I click on any link, I have a white page with the error message. I only deleted the codes that I copied from your post. I cannot get back to the editor at this point. Please help!!

This is the error message:

Parse error: syntax error, unexpected ‘}’ in /home/content/p3pnexwpnas09_data01/44/2490744/html/wp-content/themes/vantage/functions.php on line 391

Follow up: I am sure it was something I did. Fortunately, I was able to restore my site from the hosting company. All is well again. Except my header doesn’t shrink on scroll. Oh well.

Dan

I’m trying to do this on a Genesis/Dynamic Child set-up. I pasted the php and the second css above and it seems to work, except that the test logo (site title) and the menu (menu widget in the header) don’t move when the header shrinks. Any idea what I am doing wrong?

Thanks!

Also can’t get it to work. I’m using a Make Child-theme. The site is: http://sanparkshrdemo.co.za

I actually just need the custom logo to shrink upon scrolling. Is that possible?

Thanks!

I am having a similar problem. The header includes a logo, but the logo won’t shrink with the rest of the header. Suggestions?

yes,,i’m Also can’t get it to work. I’m using a lifestyle pro Child-theme. The site is:
http://tempatwisatadibandung.info/

help me please…by simple edit or you can give me recomendation plugin to fix it ?

Hello, I also can’t get it to work. I’m using catch everest theme. http://9palacestcm.com

Matt N

thanks for this tutorial. I’ve tried it and it seems to have no effect, neither making the header shrink nor sticky. I’ve check the target ID and gone through it, but I can’t quite pinpoint what’s not working. The header CSS appears to be unaffected.

I’ve inserted it in my child theme function.php and I use a CSS addon, without customising CSS directly in the parent/child theme. I’m wondering if there is a conflict with a plugin or some other php coding, but for the life of me I can’t find what. Some fresh eyes would be appreciated.

http://mthwjsphnlsn.com/

Mark

I have nearly got this working but the content jumps when the minimised header appears. How can i stop the content jumping up?

does this work with hemlock theme? i tried but doesn’t work

You are a lifesaver! I’ve been fiddling with another blog/tutorial that didn’t work until I swapped the JS (via wp_enqueue_script) and it worked like a charm. Bravo! You have a new fan!

Hi there,

I´m trying to make this work on my test site http://torco.dk/daugaard-gaardbutik/ – but I can´t seem to figure out why it´s not working for me..?

I found out that when I´m editing my functions.php by inserting your code my site shows a blank page.

I´ve tried to insert some other classes in the .php file as well as in my .css file, but all I´m seeing is a blank page.

I´m using a child theme to make the changes because I believe that is best?

Please help me with some instructions on how to do this..?!

Thanks a lot!

Regards

Torben

Dear Lee: I know this is an old post, but I am curently trapped in a situation similar to many of the people in this forum. I’ve used this same code to reduce the size on my header’s logo ( https://mozt.mx/ ) to no use. I’m using a child of the theme “North” from fuelthemes. I noticed that this particular image has the tag (or at least i think) .header .logo .logoimg img instead of the one provided. I’ve tried with a long combination of these words to no use, and with a vast combination of sizes (the logo has… Read more »

Nidhi

Hey just want to say thank you for the code, it works perfectly. I use it to hide the top bar on scroll :)

Michael Whitehead

Hey, is there any update on using this with the Twenty Seventeen theme? Thanks!

Nauman Khan

Hi, can you plz guide on how to achieve this on ubermenu, it seems I am not able to find the correct tag. I am using genesis child theme, my site is still on localhost thus unable to share the link.

Nauman Khan

I have found the solution: ubermenu offers Sticky Special Classess with Sticky Extension, thus only CSS modifications are required.

Free to your inbox

Join our mailing list to receive the latest news and updates from JournalXtra.

You have Successfully Subscribed!