Elementor sticky header not sticking

If you’re using Elementor and your sticky header is not sticking as expected, you can use custom code to fix this issue. One way to achieve this is by using JavaScript to add a CSS class to the header when it should be sticky.

Here’s an example code snippet that you can use:

jQuery(document).ready(function($) {
    var header = $('.your-header-selector');
    var stickyClass = 'sticky';

    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            header.addClass(stickyClass);
        } else {
            header.removeClass(stickyClass);
        }
    });
});

In this code snippet, you need to replace .your-header-selector with the appropriate CSS selector for your header element. The stickyClass variable represents the CSS class that will be added to the header when it should be sticky.

This code uses jQuery to listen for the scroll event on the window. When the user scrolls down more than 100 pixels, the sticky class is added to the header element. When the user scrolls back to the top, the sticky class is removed.

By adding this code to your WordPress theme or child theme, you can ensure that your Elementor sticky header sticks as expected.

Examples

Example #1: Adding a custom CSS class to the sticky header element

This use case demonstrates how to add a custom CSS class to the sticky header element in Elementor. By adding a custom CSS class, you can apply specific styles or functionality to the sticky header.

function wpsnippets_add_custom_css_class_to_sticky_header( $settings ) {
    $settings['classes'] .= ' custom-sticky-header';
    return $settings;
}
add_filter( 'elementor_pro/sticky/header_settings', 'wpsnippets_add_custom_css_class_to_sticky_header' );

In this code example, we use the elementor_pro/sticky/header_settings filter hook to modify the settings of the sticky header. We append the custom CSS class custom-sticky-header to the existing classes using the .= operator. Finally, we return the modified settings.

Example #2: Changing the sticky header height

This use case demonstrates how to change the height of the sticky header in Elementor. By adjusting the height, you can customize the appearance of the sticky header to better suit your design.

function wpsnippets_change_sticky_header_height( $settings ) {
    $settings['height'] = 100; // Change the height value as per your requirement
    return $settings;
}
add_filter( 'elementor_pro/sticky/header_settings', 'wpsnippets_change_sticky_header_height' );

In this code example, we use the elementor_pro/sticky/header_settings filter hook to modify the settings of the sticky header. We update the height value to the desired height (in pixels) and return the modified settings.

Example #3: Disabling sticky header on specific pages

This use case demonstrates how to disable the sticky header on specific pages in Elementor. This can be useful if you want to have different header behavior on certain pages of your website.

function wpsnippets_disable_sticky_header_on_specific_pages( $settings ) {
    if ( is_page( array( 'about', 'contact' ) ) ) {
        $settings['enabled'] = false;
    }
    return $settings;
}
add_filter( 'elementor_pro/sticky/header_settings', 'wpsnippets_disable_sticky_header_on_specific_pages' );

In this code example, we use the elementor_pro/sticky/header_settings filter hook to modify the settings of the sticky header. We check if the current page is either the “about” or “contact” page using the is_page() function. If it matches, we set the enabled value to false to disable the sticky header on those pages. Finally, we return the modified settings.