Sticky top bar - only seems to be sticky in the header, not the full page?

How To
1

Hi! I’m new to Bricks, and have created a header that is divided into two sections, the first of which is essentially a top bar. I’d like this top bar to be sticky across the whole page, but at the moment, it only seems to be sticky within the header section (i.e. when I scroll beyond the header, it disappears).

Could anyone offer some help to overcome this?
Thanks!

2

I haven’t tried this yet. Are you using absolute positioning to accomplish it?

A simple-minded alternative would be to put the second part of the header at the top of your other templates (like the single post template), so that only the top bar of the header is actually the header. Then make the header sticky in the header template settings. You could put the bottom header portion in a section template to include in your other templates.

3

Hi

maybe like this?

2 Likes
4

Thanks!
I have gone with just using setting a sticky header containing only the top bar, and then putting the other header components as a single post template. It seems to have worked, although slightly annoying!

5

Happy to help. I’m sure there are more advanced solutions, like what @Patric suggested. Sometimes advanced solutions are great, and other times it’s nice to keep it simple. Whatever works for you.

6

Try turning on “Sticky on scroll” in header settings. Not sure that is what you are asking for though.

7

I must say this utterly stupid solved in Bricks… The element just sticks in the real estate of the header template and not on the full page. You can’t use the header template settings like “Sticky on scroll” if you also have a top bar and/or have site wide hero image bc they are stick too… Same setup just works in Elementor without needing to search for the unique decision of bricks in their forum.

8

Maybe this can help:

  • create section template for top bar
  • set template conditions like this:
    image

Best regards
Goran

PS I’ve done it for footer and works like charm… :wink:

1 Like
9

Thanks but I already knew it and went down this route which lead me to more pain and a bug report:

10

Thanks, @tole011. It worked well for me, as well!

The only concern I have is - will this affect accessibility, Google bots and SEO?

Essentially, my top bar (which I made a section template visible above header an all pages) includes logo, phone number and email address. This has a section tag and in the html code hierarchy is above the header tag.

Within the header tag, which is sticky, I have the the navigation menu, basket and a search bar.

Because the hierarchy is a little messed up now and my section with a logo, phone number and email address is not within the header tag, could this affect screen readers, accessibility and SEO?

Thanks
Matt

P.S - Sorry for bold when I mention tags, if something had “<” and “>” symbol it wasn’t visible :wink:

11

Hey, this video might help.

12

Isn’t there a sticky position setting now? You just need to define a top for the element, and Bricks makes it “stick” when it reaches the top of the screen.

This is all theoretical, as I haven’t used it yet.

13

But it makes all of the section inside the header sticky. If you only want certain section of the header to be sticky then there is no option for that.

14

That depends on the elements you apply the styling to. You can place different section elements and different container elements inside the header, and then use position: sticky to one of them only.

That is all I was referring to.