Home > Tips & Tricks > WordPress Sticky Header

WordPress Sticky Header

Hello guys, in this trick I will show you how you can make a sticky header in your WordPress website.

Sticky header will enhance the navigation experience on your WordPress site. It will remain the header part visible at the top of the page as users scroll down.

You can identify the header element in your theme’s header.php file. Ensure that the header structure is compatible with the fixed positioning style.

Add jQuery Script for Scroll Detection

To make the sticky header on the WordPress site, you have to add the following jQuery code to your theme’s footer.php file. I recommend you use the child theme, so you don’t lose your changes when you update the theme.

jQuery(document).ready(function($) {
    var header = $('#headerId'); // Replace '#headerId' with your actual header ID or class
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
        } else {

This code detects the scroll position, adding a CSS class (‘sticky‘) to the header when the user has scrolled beyond a specified point (e.g., 100 pixels).

Style the Sticky Header with CSS

In some cases, you also need to style your header according to your theme. So add the following CSS code in your theme’s style.css file.

#headerId.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: #ffffff; /* Adjust background color as needed */
    /* Add any additional styling for the sticky header */

You can customize the styles to match your site’s design, adjusting colors, fonts, and other visual elements as desired.

You are done!!

More Tricks

Being Tricky 😉

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment