Archived topic
Centering the logo in between the primary and secondary navigation
3 replies · Started by Brenden on April 1, 2022
I am looking to add a secondary navigation to a site with a centered logo and the primary menu split on each side of the logo. I used the technique described in GP documentation (https://docs.generatepress.com/article/centering-logo-navigation/). I would like to split the secondary navigation on each side of the logo, just like the primary menu. Is that possible? If so, can you provide the CSS?
Hi there,
update your center logo CSS to this:
@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,
.secondary-navigation .main-nav {
flex: 1;
}
/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(4),
.secondary-navigation .main-nav>ul > li:nth-child(3) {
margin-left: auto;
}
}For reference the changes were made to the last 2 CSS Rules ie. these:
#site-navigation,
#primary-menu,
.main-navigation .inside-navigation,
.secondary-navigation .main-nav {
flex: 1;
}
/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(4),
.secondary-navigation .main-nav>ul>li:nth-child(3) {
margin-left: auto;
}You can see the addition of selectors beginning with: .secondary-navigation .main-nav
And in the last rule we specifically target the secondary-navigations 3rd child.
Worked perfectly, thank you!
Glad to hear that!
