[Support request] How to add logo to the center of the page on sticky menu?

[Henry]

I’d like the menu to also be centered on the sticky nav: https://prnt.sc/ocpnxe

What I achieved was pushing the logo to the left…

Thanks for all help!

[Leo]

Hi there,

I think we would need to use the sticky navigation logo:
https://docs.generatepress.com/article/sticky-navigation/#sticky-navigation-logo

Can you add that in and let me have a look?

Let me know 🙂

[Henry]

hmm – I added the sticky nav logo: https://prnt.sc/ocsv5a but it just adds the logo to the left of the screen.

Is there any way to make this smaller sticky logo stay in the centre upon mouse scroll?

Here’s the URL: https://bainmariev3.wpengine.com/

[David]

Hi there,

try this CSS:

@media (min-width: 769px) {
    #sticky-navigation .main-nav,
    #sticky-navigation .main-nav .menu-item-separator {
        flex: 1;
    }

    #sticky-navigation .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translatex(-50%);
    }
}

[Henry]

Thanks – that worked, however, I think I have to play with the larger non-sticky logo to make it sync with the scroll; probably best if I made the larger non-sticky logo smaller…

[David]

Yeah – unless you use the navigation as header then there will be that transition issue. To help a little you could use this CSS:

.sticky-enabled .main-navigation.is_stuck {
    z-index: 1000 !important;
}

It will make sure the sticky nav sits in front of the site header branding.

[Author]

Posts