Disabling Top Bar leaves white space at top on scroll

Hi there,

your site is not allowing me access - it has Access Denied. Can you check the URL and let me know

Hi David,

Sorry, the site can only be accessed within the US.

But maybe try to access this other link.

That's because you are using this CSS to fix the header:

.site-header {
    position: fixed;
    width: 100%;
    top: 40px;
    z-index: 99;
}

So the site header is always 40px from the top regardless there is a top bar or not.

Okay, thanks!

Are we adding the sticky header the wrong way? Is there a way to achieve this without CSS (or just a better way)?

Thanks again!

Is that all you want in the header? Just a logo and no menu items?

On that specific page yes. We have a handful of pages that disable some elements, but most of our pages display the full header, nav and top bar.

So, we want the sticky header globally. Hope that makes sense and thanks again!

Hi Chad,

If you don't need any transition effect for the sticky header, then using CSS is the better way compared to using the sticky option in the customizer, since CSS loads faster than Javascript.

You can try this CSS for this specific page:

.page-id-5392 .site-header {
    top: 0;
}

Okay, so basically I could add .site header {top: 0;} to all of our pages that I've disabled the top bar?

Yes, correct :)

OKay, will go this route. Thank you!

No problem :)