[Resolved] Site logo Centering on Sticky Menu

[Ian]

Hi
At my site I have managed to center my logo which looks fine.
I also have sticky navigation on but the logo is on the left despite the break in the menu to make position for it.

I read the topic at https://generatepress.com/forums/topic/sticky-nav-and-mobile-version-issues-with-logo-centered-navigation/

But when I swap out the .site-branding, .site-logo for .navigation-branding, .site-logo code as instructed the regular menu loses the logo and just leaves a gap.

Also I have a top banner that displays and hides most of the sticky menu – it does not affect the main menu header (pushes it down as you want).

How can I get both logos to show up centered?
Could you give me an idea of best breakpoint value to use?
Could you tell me how to move the sticky menu down to make provision for the top sign-up bar from Optinmonster?

Thanks
Ian

[Tom]

Hi there,

For the centering issue, replace this:

.site-branding, .site-logo {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 200;
}

With this:

.site-branding, .site-logo, .sticky-navigation-logo {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 200;
}

The top banner is an issue since you’re using the sticky navigation only when scrolling up. If you want to always show the sticky navigation, we can likely use some CSS.

Otherwise, you may need to move the banner.

[Ian]

Hi
That works a treat.

As for the banner I’d rather have that there on all the pages – it is less obtrusive than other solutions unless you have ideas.

So what are the choices?
Having the sticky menu all the time instead of just on upscroll?
Using CSS to move it down under the baanner while the banner is there?
Always showing sticky navigation – for which we may as well just use the regular header and navigation since they are practically the same?

Thanks
Ian

[Tom]

Having the sticky menu all the time would likely allow us to fix the issue with CSS.

There isn’t a way to fix it using the sticky on scroll up at the moment, unfortunately.

It doesn’t look like the banner is on the site right now – let me know when you re-add it and I can help with the CSS 🙂

[Author]

Posts