[Resolved] Center Logo Navigation – Disable in Navigation Search

[Douglas]

I’m using the CSS offered in the support documentation to center my logo in the primary navigation header (https://docs.generatepress.com/article/centering-logo-navigation/).

However, when using the navigation search feature, the centered logo remains visible and clickable, even though the rest of the menu recedes. The logo does not have this problem when the centering CSS is not present. What is the best way to resolve this?

GeneratePress 2.2.2

GP Premium 1.7.8

[Tom]

Hi there,

Any chance you can link us to your site so we can see the issue? You can edit your post to include your link privately.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Douglas]

Sorry about the delayed response; I had the dev site on a local environment, but I’ve moved it to an online staging site. I’ve added a URL to the original post.

[David]

Hi there,

you can edit this CSS you added:

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

And reduce the z-index to 15

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Douglas]

Thank you!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Douglas]

One more question that has me stumped… I’ve been messing around with the CSS and can’t figure this out. I tried to increase the page width that triggers the mobile header up to 960px (in order to avoid a collision between the logo and the menu items). However I’m now in a situation where there are two navbars when the width falls anywhere between 768px and 960px, and I cannot figure out how to resolve this.

[David]

Try this:

@media (max-width: 960px) {
    #primary-menu {
        display: none;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Douglas]

I had tried that; the problem is that breaks the menu toggle between 768px-960px; now clicking on the mobile menu doesn’t do anything.

Also it’s odd that the menu button is on the left side above 768px, and switches to the right side below 768px.

[David]

Sorry my bad – try this CSS for adjusting the breakpoint:

https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Douglas]

Works perfectly! Thanks again.

[Author]

Posts