[Resolved] Offset content when topbar is active

[Roger]

Is there a way to offset the first content section on the page when displaying a top bar (in my case, the slider or page hero)?

I’ve offset the primary navigation, but can’t figure out how to increase the padding so that the hero slot retains the same spacing below the navigation when the top bar is active.

Thanks for your help.

[David]

Hi there,

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

[Roger]

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?

[David]

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 }

[Roger]

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

[David]

Awesome – Glad to be of help.

[Author]

Posts