How to Create a Sticky Header in WordPress

Creating a sticky header in WordPress can enhance the user experience by keeping important navigation links accessible at all times. To achieve this, we can utilize a combination of CSS and JavaScript. In this tutorial, we will guide you through the process of implementing a sticky header on your WordPress website.

First, let’s create a custom WordPress plugin to add the necessary functionality. Create a new PHP file in your plugins directory and name it my-sticky-header.php. In this file, we will enqueue our custom JavaScript file that will handle the sticky header functionality.

<?php
/*
Plugin Name: My Sticky Header
Description: Add sticky header functionality to your WordPress website.
*/

function flashify_enqueue_scripts() {
    wp_enqueue_script( 'my-sticky-header', plugin_dir_url( __FILE__ ) . 'js/sticky-header.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'flashify_enqueue_scripts' );
?>

Next, let’s create the JavaScript file sticky-header.js in a subdirectory named js inside your plugin directory. In this file, we will write the code to make the header sticky.

jQuery(document).ready(function($) {
    var header = $('#masthead');
    var headerOffset = header.offset().top;

    $(window).scroll(function() {
        if ($(window).scrollTop() > headerOffset) {
            header.addClass('sticky');
        } else {
            header.removeClass('sticky');
        }
    });
});

Now, let’s add some CSS to style our sticky header. Add the following code to your theme’s style.css file or create a new CSS file and enqueue it in your plugin.

#masthead {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    width: 100%;
    transition: all 0.3s ease;
}

#masthead.sticky {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

Finally, activate your custom plugin in the WordPress admin panel. You should now have a sticky header on your WordPress website that remains fixed at the top of the page as users scroll.

By following these steps, you can create a sticky header in WordPress to improve navigation and user experience on your website. Feel free to customize the styling and functionality to suit your specific needs.