Archived topic
Center Logo Navigation - Disable in Navigation Search
10 replies · Started by Douglas on February 23, 2019
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?
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 :)
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.
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
Thank you!
You're welcome
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.
Try this:
@media (max-width: 960px) {
#primary-menu {
display: none;
}
}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.
Sorry my bad - try this CSS for adjusting the breakpoint:
https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043
Works perfectly! Thanks again.
