[Resolved] Center logo in header

[wickedonline]

Hi,

I am trying to center the logo in the header of our site but it’s not working correctly.

The first issue is that when you make the browser window width shorter in desktop the header doesn’t look correct.The navigation items go on top of the logo.

The second issue is that when you enlarge the screen on a large monitor, the logo moves to the right and goes over the right navigation items.

[wickedonline]

Here is the code I am using:

@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(4) {
margin-left: auto;
}
}

[Ying]

Hi there,

Can you go to customizer > layout > Primary navigation:
1. set navigation location to below header.
2. set Inner Navigation Width to Full.
3. set navigation location back to float right.

Let me know 🙂

[wickedonline]

Hi that fixed the second issue but still have issues when you make the browser window smaller. Would it be the mobile breakpoint setting?

[Ying]

You mean something like this?
https://www.screencast.com/t/AaSiHNguy4K

If so, the logo doesn’t move, there’s just not enough space for everything in the header at this width.

You can try set t a higher mobile breaking point, eg. 970instead of 768
https://docs.generatepress.com/article/primary-navigation-layout-overview/

[wickedonline]

Perfect! That worked! The only thing remaining is the padding on the left and right of the sticky header. When we made these changes, the navigation items on the sticky header are all the way to the left and all the way to the right.

[Ying]

Try adding this CSS:

@media (min-width: 971px) {
#sticky-navigation .inside-navigation {
    padding: 0 64px 0 64px;
}
}

[wickedonline]

That worked perfectly. Thank you!!

[Ying]

You are welcome 🙂

[Author]

Posts