Top Bar Fixed

Hi there,

Give this CSS a shot:

.top-bar {
    position: fixed;
    top: 0;
    width: 100%;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Hi Leo,

I tried this on a local test site and although it does stick on scrolling down, it is initially hidden. I tried a few things but couldn't get it to "be where it should" and then stick on scroll.

Cheers!
Lyle

The best way to do it is to use position: sticky, although it doesn't have amazing browser support: https://caniuse.com/#feat=css-sticky

.top-bar {
    position: sticky;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
}

Otherwise, you can try this:

.top-bar {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
}

body {
    padding-top: 39px; /* height of your top bar */
}

Thanks guys, this one worked...

.top-bar {
position: sticky;
z-index: 999;
top: 0;
left: 0;
right: 0;
}

Thanks Tom! :) The first one worked fine :)

Can't wait until position: sticky is better supported :)

None Of These Work For Me :(

Hmm I just tested and it works.

Can you link us to your site with the code added?

Hi Leo,

I am having an issue with top bar sticky option on all views on scroll.
The link to my site https://fr8data.com/
Any idea to resolve the issue?

Regards,

Alex

Any chance you can open a new topic for the question?

This one is a bit old with multiple authors.