Divi sticky header

The Divi theme is a popular WordPress theme that allows you to create beautiful and customizable websites. One of the features that many users love is the sticky header, which keeps the header fixed at the top of the page as the user scrolls.

To achieve a sticky header in Divi, you can use a combination of CSS and JavaScript. Here’s an example code snippet that you can use:

/* CSS */
.et_header_style_centered #main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

/* JavaScript */
(function($) {
    $(document).ready(function() {
        var headerHeight = $('#main-header').outerHeight();

        $(window).scroll(function() {
            if ($(this).scrollTop() > headerHeight) {
                $('#main-header').addClass('et-fixed-header');
            } else {
                $('#main-header').removeClass('et-fixed-header');
            }
        });
    });
})(jQuery);

This code snippet adds a CSS class called et-fixed-header to the #main-header element when the user scrolls past the header’s height. The CSS code sets the position of the header to fixed and ensures it stays at the top of the page. The JavaScript code calculates the height of the header and adds or removes the et-fixed-header class based on the scroll position.

To use this code snippet, you can add it to your child theme’s CSS file and JavaScript file. If you’re not using a child theme, you can use a custom CSS plugin to add the CSS code and a custom JavaScript plugin to add the JavaScript code.

This code snippet can be useful for any website built with the Divi theme that wants to have a sticky header. It provides a smooth and user-friendly scrolling experience, keeping the header visible at all times.

Examples

Example #1: Creating a Sticky Header with Divi Theme

This example demonstrates how to create a sticky header using the Divi theme. The sticky header will stay fixed at the top of the page as the user scrolls down.

function wpsnippets_divi_sticky_header() {
    if (is_admin()) {
        return;
    }

    wp_enqueue_script('divi-sticky-header', get_stylesheet_directory_uri() . '/js/sticky-header.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'wpsnippets_divi_sticky_header');

In this code example, we’re creating a custom function wpsnippets_divi_sticky_header that enqueues a JavaScript file called sticky-header.js using the wp_enqueue_script function. This JavaScript file will contain the necessary code to make the header sticky. The function is hooked to the wp_enqueue_scripts action to ensure it is loaded on the front-end.

Example #2: Adding CSS for Sticky Header

This example demonstrates how to add custom CSS to style the sticky header created with Divi theme.

function wpsnippets_divi_sticky_header_css() {
    if (is_admin()) {
        return;
    }

    wp_enqueue_style('divi-sticky-header-css', get_stylesheet_directory_uri() . '/css/sticky-header.css');
}
add_action('wp_enqueue_scripts', 'wpsnippets_divi_sticky_header_css');

In this code example, we’re creating a custom function wpsnippets_divi_sticky_header_css that enqueues a CSS file called sticky-header.css using the wp_enqueue_style function. This CSS file will contain the necessary styles to make the header sticky. The function is hooked to the wp_enqueue_scripts action to ensure it is loaded on the front-end.

Example #3: Modifying Sticky Header Behavior

This example demonstrates how to modify the behavior of the sticky header created with Divi theme.

function wpsnippets_divi_modify_sticky_header() {
    if (is_admin()) {
        return;
    }

    wp_add_inline_script('divi-sticky-header', 'jQuery(".et_header_style_centered .et-fixed-header").removeClass("et-fixed-header");');
}
add_action('wp_enqueue_scripts', 'wpsnippets_divi_modify_sticky_header');

In this code example, we’re creating a custom function wpsnippets_divi_modify_sticky_header that uses the wp_add_inline_script function to add inline JavaScript code to modify the behavior of the sticky header. In this case, we’re removing the et-fixed-header class from the sticky header element with the class et_header_style_centered. This can be used to customize the behavior of the sticky header based on specific requirements.