[Resolved] Position sticky logo above navigation which is left aligned.

[Patricia]

I need to duplicate a client’s troublesome theme in GeneratePress and am having trouble with the sticky menu.

The current site / theme: https://americanheritagepublications.com

My GP site I’m using for testing: https://whitewingdesign.com/bbbrown

I need the site logo to remain above the left aligned navigation. I can correctly size the logo later but am unable to position it above the navigation.

Thanks, as always!

[Ying]

Hi Patricia,

If you don’t need animation during the transition between the primary navigation to sticky navigation, then I would suggest disable the sticky navigation option, but use CSS instead.

You are using navigation as header option, try disabling that option as well, set navigation location to below header.

You should be able to align the header and primary navigation individually in customizer.

Once it’s done, we can help with custom CSS to make the header and primary navigation sticky.

Let me know 🙂

[Patricia]

Thank you for the quick response. I now have the logo as site identity and have the primary navigation in place (aligned left). How do I make the logo & navigation sticky?

https://whitewingdesign.com/bbbrown

[Ying]

Try this CSS:

nav#site-navigation, header#masthead {
    position: fixed;
    width: 100%;
}
nav#site-navigation {
    top: 80.17px;
}
header#masthead {
    top: 0;
}

The value of80.17px is the height of the current header, if you change the logo size the height will change, you’ll need to update this value by then 🙂

[Patricia]

I’ve added the CSS to customize>additional css but it did not produce a sticky header/nav area.

[David]

Hi there,

remove the CSS that Ying provided.
Then add this CSS, but can you add it to the very top of the Additional CSS:

header.site-header, .main-navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.main-navigation {
    top: 80px;
}

[Patricia]

This worked very well. Thank you for quick response.

[David]

Glad to be of help

[Author]

Posts