Offset content when topbar is active

Hi there,

not sure if i understand correctly, are you wanting the layout to remain unchanged whether there is a top bar or not?

Hi David. What I'm after is if the top bar is displayed, the hero padding is increased by the equivalent amount. Is that possible?

So we could try adding a class to the body when the top bar is hidden, as you already have cookied close top bar script try updating it to this:

jQuery(document).ready( function( $ ) {
    // Get our cookie
    var cookie = getCookie('closetopbar');

    // Check if the cookie is set
    if(cookie){
        // If yes, hide the top bar
        $('.top-bar').hide();
 
        // Add this code below
        $("body").addClass("top-bar-hidden"); 
 
    }else{
        // If no, fire a function when the close button is clicked
        $('.top-close-button').on('click', function(e) {
            e.preventDefault();

					setCookie('closetopbar',true,0);
					
            $('.top-bar').css('transform', 'translate(0%, -100%)');
 
            // Add this code below
            $("body").addClass("top-bar-hidden"); 
 
            if ($('div#wpadminbar')[0]){
                $('body').css('transform', 'translate(0, -112px)');
            } else {
                $('body').css('transform', 'translate(0, -76px)');
            }
        });
    }
});

There are two instances of:

// Add this code below
$("body").addClass("top-bar-hidden"); 

Which need to be added - you can change the comment.

If it works we should see the top-bar-hidden class in body tag.
We can then do some CSS that uses body:not(.top-bar-hidden) .element { styles }

Perfect. Thanks a million, David, that does exactly what I needed! :)

Awesome - Glad to be of help.