How Do I Create A Sticky Header?

The option suddenly appeared in the customizer, I guess I didn't have the proper plug-in options activated. However, the logo and site identity disappears on the sticky header.

Also, the typography settings I input for the Site Identity are not holding on mobile, everything gets bigger and centered, how do I stop this?

Hi there,

the Sticky Navigation (which is included in the Menu Plus Module) is only a Sticky Navigation. In the Customiser > Layout > Primary Navigation you can include a Navigation Logo which you can set to sticky only or static + sticky.

For the mobile, you can also set the Mobile Header in Layout > Header where again you can assign a different logo if you wish. This will stop the normal site header logo from being displayed.

I want a header with the logo, then the name + tagline to the left, then a space, and the nav to the right - on mobile, the nav turns into a hamburger menu. I can't get the Site Identity to show on mobile or sticky, and the logo is HUGE and underneath everything in regular/desktop.

Hi there,

ok so the Nav and Mobile Header doesn't natively have a space for the Site Identity, but we could do all of what you require with a little code.

However, the easiest solution for this is to use an SVG image for the Site Logo to which you can include the brand identity to, just make sure to convert the font to curves / outlines. Likewise for a Nav or Mobile Logo. Here's how to add an SVG:

https://docs.generatepress.com/article/adding-svg-logo/

Let me know

Does it need to be an SVG for that code to work, seems to work with the existing PNG file, too. But now the logo is to the right of the Site Identity, and how do I add that to the mobile/sticky headers? The logo is also now skewed on the mobile/sticky header.

The SVG method is to combine the Logo and the site branding into one image. Proposing SVG as it is better for displaying text then PNG. The plugin and setting the size is required as WordPress doesn't natively support SVG and they don't have a predefined size like a PNG, so they won't display without that.

Okay, I did that, doesn't look good, but I'll make another logo later if I still want to deal with this theme. However, the logo is larger in the normal header than the sticky/mobile header and not centered with the navigation bar.

I believe this is what you are trying to achieve:
https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

Yes, thanks! This is very close, the only problem now is the logo gets tiny on mobile even though the bar appears to be the same size as desktop.

You can use this CSS to remove the padding around the logo on mobile:

.mobile-header-navigation .mobile-header-logo img {
    padding: 2px;
}

I think it will work better if you remove the top and bottom space from the actual logo image though:
https://www.screencast.com/t/bcJsFByd

Is there no "Sticky" Yes/No for the Header??? Or for at least the "row" where the menu is located? Do I have to create a header in Elementor in order to get a sticky header?

Hi there,

For the Navigation only Yes:

https://docs.generatepress.com/article/sticky-navigation/

You can also set the Navigation as the Header:

https://docs.generatepress.com/article/navigation-as-a-header/

If you want the standard Site Header to be Sticky then this CSS will do the trick:

.site-header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

Wow! I totally missed the "Sticky Navigation" option under Layout!

Really sorry for having bothered you.

Much appreciated!