How To Stop The Divi Header From Shrinking On Scroll

by | Last updated Feb 7, 2020 | Uncategorised | 0 comments

In this tutorial I’ll show you How To Stop The Divi Header From Shrinking On Scroll but – based on selected tags.

So the other day I had to create different header designs for different post categories – and I was brainstorming a little bit to come up with this simple 2 step solution which actually allow you style your Divi header based on post tags.

So how we gonna do it?

First we are going to add a little peace of php snippet to our functions.php file in our divi child theme, and that snippet is going to add our post tag into the body tag in HTML markup.

Then we are going to add a little javascript fix that will make our header not shrink on scroll.

Here’s the PHP snippet I used in the video:

Just add this to your child theme functions.php file.

// Add tags to single post BODY
function add_tags_to_body_class( $classes ) {

    // if this is a page or a single post
    // and this page or post has tags
    if( ( is_page() || is_single() )
        && $tags = get_the_tags( get_queried_object_id() ) ){

        // loop over the tags and put each in the $classes array
        // note that you may want to prefix them with tag- or something
        // to prevent collision with other class names
        foreach( $tags as $tag ) {
            $classes[] = $tag->name;
            // or alternately, with prefix
            // $classes[] = 'tag-' . $tag->name;
        }
    }

    // return the $classes array
    return $classes;

}
add_filter( 'body_class', 'add_tags_to_body_class' );

Here’s the jQuery:

Be sure to put this in the <body> section in the integrations tab under Divi > Theme Options > Integrations.

The code below will be executed only in posts which have tag divi. This means  that only posts with tag divi will have non shrinking header. If you want to apply this globaly to all posts and pages, just remove body.divi from the code below.

<script>
(function(){
    // Override the addClass to prevent fixed header class from being added
    var addclass = jQuery.fn.addClass;
    jQuery.fn.addClass = function(){
        var result = addclass.apply(this, arguments);
            jQuery('body.divi #main-header').removeClass('et-fixed-header');
        return result;
    }
})();
jQuery(function($){
    $('body.divi #main-header').removeClass('et-fixed-header');
});
</script>

Additional resources:

  1. How To Create a Child Theme

Like this tutorial? You’ll love my CSS Course!

Check out my Divi Beginners Course!

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *