Sticky header and top bar

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

Hi there,

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

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

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.

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

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.