Archived topic
Sticky nav bar floats left on scroll, how to keep floating right?
5 replies · Started by Jon on December 9, 2021
Hello:
I have a primary menu set up as sticky & Navigation position as “Float right”.
I have an element header to merge the background image into the Nav area.
When I scroll down and the sticky navigation bar appears, I lose the site Id and all the menu items float left.
I cannot see where to change this. There are no CSS modifications (so far).
Staging site Id is listed in Private information below
Wordpress 5.8.2
Generate Press 3.1.0
GP Premium 2.1.1
Hi Jon,
The CSS for float right works when there's a site branding in site header/navigation.
Give this CSS a try:
#sticky-navigation .inside-navigation.grid-container {
justify-content: flex-end;
}Let me know :)
You said the CSS for float right works when there's a site branding in site header/navigation.
Do you mean in Elements / SiteHeader? What site branding? There is no option there for site branding.
Oddly, when I go to Customizer / Site Identity and load a logo image there, THEN go to Elements / SiteHeader, suddenly there is an option to upload a site logo that wasn't there before. Is that what you mean by "site branding"? So I add the logo there, and the float right still does not work. The CSS you supplied has to exist in the Customizer / Additional CSS.
But here's the thing. No matter what, the logo disappears from the sticky menu when scrolling.
Am I missing something, or is this a bug?
Do you mean in Elements / SiteHeader? What site branding? There is no option there for site branding
I mean add a logo for the sticky navigation at customizer > layout > sticky navigation.
Both site title and site logo can be recognized as site branding. But site title doesn't work in Sticky navigation.
THEN go to Elements / SiteHeader, suddenly there is an option to upload a site logo that wasn’t there before
I don't think you'll need to upload a logo there, it's for someone want to use different logo for the page where this header element is hooked in.
Okay, we are making progress.
Is there a way to sync up the width of the logo for the sticky navigation? When loading it in the customizer > site identity I can set the max width at (200px), but there doesn't seem to be the same option for max width in the customizer > layout > sticky navigation.
In other words, the logo should be the same size whether scrolling (sticky) or not.
I noticed that you are not using animation for the sticky navigation, then I think disable the sticky navigation at customizer > layout > sticky navigation, and add this CSS would be a better option:
header#masthead {
position: fixed;
width: 100%;
top: 0;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
