[Resolved] Center Loge In Navigation

[Tim]

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;
}
}

[Ying]

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 20px value to adjust the vertical position of the logo.

[Tim]

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?

[Fernando]

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.

[Tim]

I tried adding that but no luck.

Sounds good on the menu centering.

[Fernando]

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;
            }

[Tim]

Thank you!

[Fernando]

You’re welcome, Tim!

[Author]

Posts