[Resolved] Top Bar Fixed

[David]

Hello

How can I get the top green bar on this page, so it’s fixed and doesn’t mess around with the blue header bar below…

https://www.comfortably-numb.co.uk/dentist/

Trying to get it to work on both desktop and mobile but not having much luck.

Green bar just need to stay in a fixed position when scrolling down.

Please help.

Thanks
Dave

[Leo]

Hi there,

Give this CSS a shot:

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

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

[Lyle]

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

[Tom]

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 */
}

[David]

Thanks guys, this one worked…

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

[Lyle]

Thanks Tom! 🙂 The first one worked fine 🙂

[Tom]

Can’t wait until position: sticky is better supported 🙂

[jesus]

None Of These Work For Me 🙁

[Leo]

Hmm I just tested and it works.

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

[Alex Bukin]

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

[Leo]

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

This one is a bit old with multiple authors.

[Author]

Posts