- This topic has 7 replies, 3 voices, and was last updated 2 years, 11 months ago by
.
-
Posts
-
Hello, I’d like to center the logo in the navigation but when I install the code found below it still isn’t working. When I change “navigation as header” it pops up to high in the margin
@media(min-width: 769px) {
.inside-header>.site-branding,
.inside-header>.navigation-branding,
.inside-header>.site-logo,
.site-branding-container,
#site-navigation .navigation-branding .site-logo,
#sticky-navigation .navigation-branding {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}#site-navigation {
margin-left: unset !important;
display: flex;
}.site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
margin: unset;
}#site-navigation,
#primary-menu,
.main-navigation .inside-navigation {
flex: 1;
}/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(3) {
margin-left: auto;
}
}Customer Support
Hi there,
When I change “navigation as header” it pops up to high in the margin
Not sure what you mean by to high in the margin, do you mean the position to close to the top edge?
If so, you can change this CSS:
.inside-header>.site-branding, .inside-header>.navigation-branding, .inside-header>.site-logo, .site-branding-container, #site-navigation .navigation-branding .site-logo, #sticky-navigation .navigation-branding { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1000; }to this:
.inside-header>.site-branding, .inside-header>.navigation-branding, .inside-header>.site-logo, .site-branding-container, #site-navigation .navigation-branding .site-logo, #sticky-navigation .navigation-branding { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1000; top:20px; }Feel free to adjust the
20pxvalue to adjust the vertical position of the logo.Thank you!
Now when I made those changes the right menu looks further spaced away from the logo than the left menu.
Also the menu items are not centered on the logo. Is there a way to adjust the menu items like we did the logo?
Customer Support
Try adding this for the vertical menu spacing:
div#primary-menu { margin-top: 20px; }Change the value to your liking.
As for the logo, it’s exactly at the center horizontally. It may just look nearer to one side because the menu items on that side is longer horizontally.
I tried adding that but no luck.
Sounds good on the menu centering.
Can you remove the extra
}at the very bottom of your Additional CSS? It’s causing a syntax error.The one after this:
/* Change nth-child(#) to first item to right */ .main-navigation ul li:nth-child(4) { margin-left: auto; }Thank you!
You’re welcome, Tim!
- You must be logged in to reply to this topic.
