[Resolved] Sticky top bar (block elements / before_header) on specific pages only

[Selene]

Hello,

I have a site with several top bars (made with GP/GB Elements before_header). Not all pages have a top bar, some have a basic one that does NOT need to be sticky, and some (mostly the blog) have one with ads that DOES need to be sticky. I’ve found other related posts, but not with this specific combination.

I already have the sticky header setup through the regular GP settings, but I need to make one of the top bar (before_header) elements sticky along with the header, as well. I do have the premium version of GP and GB if that helps.

I’ve posted links in the private info box. Thanks in advance for your help!

Selene

[Ying]

Hi Selene,

I already have the sticky header setup through the regular GP settings, but I need to make one of the top bar (before_header) elements sticky along with the header, as well.

It’s not possible to have the GP sticky header and a sticky topbar at the same time.

As the sticky header will be fixed to the top which can not be changed without custom development.

The only possible option is to disable GP’s sticky header and try a pure CSS solution.

Let me know what you think 🙂

[Selene]

Hi Ying,

If the only option is CSS, that would be fine. I know it’s a more complex situation trying to have both be sticky, but only on certain pages.

If you can provide the code, that would be greatly appreciated!

[Ying]

Try this css, replace the 35px with the actual height of your top bar, so the sticky header appear below the topbar.

.page-id-47741 :is(.gb-container.gb-container-fb25073d, .site-header) {
    position: sticky;
    top: 0;
    z-index: 999999;
}

.page-id-47741 :is(.site-header,#mobile-header) {
    top: 35px !important;
}

[Selene]

This is perfect, thank you so much! I just needed to add a few items for the other 2 pages, as well as the blog, archives, and posts. I also duplicated the second section to adjust for desktop vs mobile.

Works like a charm, thank you again! 🙂

[Ying]

Glad to hear that 🙂

My pleasure!

[Author]

Posts