Position sticky logo above navigation which is left aligned.

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 :)

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

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 :)

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

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;
}

This worked very well. Thank you for quick response.

Glad to be of help