sticky top bar – GeneratePress

This topic has 7 replies, 3 voices, and was last updated 4 years, 1 month ago by Ying.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
August 12, 2021 at 2:39 pm #1893943

Alex Bukin

Hello,

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

Regards,

Alex

August 12, 2021 at 2:59 pm #1893952

Leo
Staff
Customer Support

Hi Alex,

Just to confirm, do you want the top bar and header/navigation both sticky?

If so can you disable the sticky navigation option first?

We will just do it together with CSS.

Let me know 🙂

August 12, 2021 at 3:03 pm #1893953

Alex Bukin

I turned off Sticky Navigation and Sticky Header

August 12, 2021 at 3:34 pm #1893979
Ying
Staff
Customer Support
Hi Alex,

Give this CSS a try:
```
@media (min-width: 769px) {
.gb-container.gb-container-0081696b, #site-navigation {
    position: fixed;
    width:100%;
    z-index: 2000;
}

#site-navigation {
    top: 34px;
}
.gb-container.gb-container-0081696b {
    top: 0;
}
nav#site-navigation + * {
    margin-top: 114px;
}
}
```
Let me know 🙂
August 12, 2021 at 3:41 pm #1893982

Alex Bukin

Ying,

The desktop and tablet works, mobile is not.

Thanks,
Alex

August 12, 2021 at 3:55 pm #1893985
Ying
Staff
Customer Support
Right, the CSS was only for desktop and tablet. I wasn’t sure if you want them sticky on mobile as well.

Try this CSS for mobile:
```
@media (max-width: 768px) {
.gb-container.gb-container-0081696b, #mobile-header {
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#mobile-header {
    top: 39px;
}

.gb-container.gb-container-0081696b {
    top: 0;
}

#site-navigation + * {
    margin-top: 95px;
}
}
```
August 12, 2021 at 4:01 pm #1893989

Alex Bukin

It is working now.
Thank you very much.

Alex

August 12, 2021 at 5:15 pm #1894010

Ying
Staff
Customer Support

You are welcome 🙂
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

[Resolved] sticky top bar

Popular Articles

Start building better websites today.