Centering Your Logo In the Navigation

Centering Your Logo In the Navigation

Centering the logo with menu items on both side is super easy with GeneratePress.

First, make sure you are using the Flexbox structure of the theme. This can be checked in Customizer > General.

Then you can either set the navigation location option to float left/right or use the navigation as a header option.

Next, add the CSS here:

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

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注