[Support request] Sticky header and top bar

[Sean]

Hi

I have a simple header that includes a logo on the left and main nav on the right. Set to sticky.

There is also a Top Bar element using generate_before_header which I like because of the ability to add anything.

When scrolling down the page the Top Bar disappears, which I would prefer to stay put.

2 questions:

1 – How can both the header and top bar be sticky together, prob exc mobile.
2 – Is there a better way to achieve this? A new element using Site Header element type presumably gives more design scope? Can the Top Bar content just be included within that element?

Thank you
Sean

[Sean]

So this seems to be the kind of thing I need to do:

https://generatepress.com/forums/topic/sticky-before-header-hook/

Any suggestions to make sure it’s correctly responsive?

Thanks

[David]

Hi there,

can i see the site with the top bar and header ?

[Sean]

Hi

Here’s the link https://www.respectmortgages.co.uk/cookies/

Site under development

I am testing with one new header element at the moment

Sean

[David]

If you’re going to build the header with a Block Element then you could simply start with a Container Block that is Full Width and build inside that the Top Bar followed by the header.

Alternatively if the Top Bar was its own block element then you can use the same position: sticky; CSS. You just need to offset the Top position eg.

.my-top-bar, .site-header {
    position: sticky;
    top: 0;
}
.site-header {
    top: 60px; /* height of top bar */
}

Responsiveness can be a pain. If you can guarantee the topbar height doesn’t change then that method will work fine.

[Sean]

Thanks

So I’m building inside a container, option 1 above. The sticky bit seems OK now and I have added the logo

I would like 2 navigation menus:

1 – On the top a very simple menu, I am currently using 5 buttons for these which seems fine
2 – Main navigation below – The Primary Nav won’t show here so I have inserted a Nav Menu. But I can’t seem to find a way to style it? ie spacing and dropdown options to make it look better

Any ideas please?

Thanks

[Ying]

GP has no control over WP’s navigation block.

You can either set the style(colors/typography)within the navigation block, or using custom CSS.

[Author]

Posts