[Resolved] Keep sticky menu logo centered

[Anne]

Hi everyone,

I’m using the Split theme. I added a logo to my sticky navigation but it moves to the left side of the screen when I start scrolling down on the page.

I want to keep the position of the logo the same in the regular menu and the sticky menu. How can I do that?

Thank you!

[David]

Hi there,

in Customizer > Layout > Primary Navigation – change the Inner Navigation Width to Contained.

If thats not it – can you share a link to your site so i can take a look. Can probably resolve the Navigation Search issue at the same time 🙂

[Anne]

Thanks David!

Changing the Inner Navigation Width to Contained made the menu, well, more “contained” but the logo still moves to the left side of the screen when I scroll down.

I’m working on the website locally but here are screenshots:

1. regular menu
2. sticky menu

Thank you!

[Leo]

We would really need to see the site and inspect the code to be able to help with issue like this.

Can you duplicate the issue on a live server?

Thanks 🙂

[Anne]

I do have it on a live server as well, but protected with a password. Is there a way I can send you the details privately?

[Leo]

Can you edit the original topic to include the URL in the private URL field (only our staff can see)?

Then you can just provide the password here as it’s useless to other users without knowing the URL.

Let me know 🙂

[Anne]

Done!

Username: staging_xwbdry
Pwd: 7mgnvVAFAYcd

(you will see I’m also currently struggling with the topbar conflicting with the sticky bar but that’s another issue)

Thank you!

[David]

In Customizer > Additonal CSS change this:

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

to:

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

And then add this CSS:

@media(min-width: 769px) {
    #sticky-navigation {
        top: 41px !important;
    }
    
    #sticky-navigation.main-navigation:not(.slideout-navigation) .main-nav {
        width: 100%;
    }
    #sticky-navigation .inside-navigation {
        padding-left: 40px;
        padding-right: 40px;
    }
}

[Anne]

Thanks so much, David! The logo now stays in the middle 🙂

The only issue is that when the topbar is dismissed it leaves a gap like this. Any idea how I can address that? (happy to open a new topic as it’s not exactly the same issue as the original one)

Many thanks!

[David]

Hmmm… i can’t actually see an easy way around it. The Mail Chimp top bar doesn’t add any body classes i can use to style the nav differently.

[Anne]

Do you think there’s a way to achieve a similar thing using the GeneratePress top bar?

The part I’m unclear on is showing the GP top bar depending on whether the person has already signed up to the newsletter or not — not sure that’s feasible?

Thank you!

[David]

Not really as it would require cookies and stuff to determine the user has subscribed.
The simplest option would be to remove the Sticky option on either the MC bar or the Navigation.

[Anne]

I ended up keeping everything fixed at the top for now and always showing the email bar regardless of subscription status 🙂 Many thanks for the amazing support!

[David]

🙂

[Author]

Posts