[Support request] How can we center logo with navigation divided on both sides?

[Amit]

Hi,
I am interested in centering the logo of my site something like roastycoffee.com with navigation divided on both sides. Also, what should be the optimal size of image to keep here as I want to have sticky navigation.

[David]

Hi there,

so this is the simplest method for adding logo in center of navigation:

https://docs.generatepress.com/article/centering-logo-navigation/

For the logo size, i always work on the basis of the menu item line-height. Roastycoffee for example us 150px x 42px

[Amit]

Things worked but the logo is gone when viewed on mobile. And when I clicked on some menu option on mobile, the nav bar changes to orange color.

[David]

Ok looking good. So do you want the logo above the Navigation on mobile?
For the color fix are you able to flush the autopotimize cache and disable it.

[Amit]

I want the logo between the Menu button and the search icon, not above that as the area after the button is empty. I am able to empty the cache but won’t be able to disable it.

[David]

for the Mobile logo, activate the Mobile Header in Customiser > Layout > Header. And add the logo there. We can then use some CSS to re-order the elements.

Whilst the cache is on i cannot see where the CSS effecting the mobile hover styling is coming from. Try the mobile header first and lets see.

[Amit]

Ok, let me switch off the cache for some time….check now…

[Amit]

The logo is also coming weird in mobile. It’s coming at top of the menu and search button..

[Amit]

I want something like this but on mobile
https://www.nataliabasdeki.com/

[Leo]

I can’t quite tell because you have caching plugin on but looks like you have this CSS added?

.mobile-header-navigation .mobile-header-logo img {
    height: 80px;
}

This article should help to center mobile header logo:
https://docs.generatepress.com/article/centering-logo-mobile-header/

[Amit]

I am unable to figure out as from where that CSS is coming up as there is nothing like this in the additional css as well as in the child css. Before this step of positioning the logo at the center of navigation, everything was fine and the logo was displayed in line between Meny and Search button.
Please help me out and if you need to login to check, I can provide credentials!

[David]

Hi there,

can you switch off autoptimize? Whilst it is on its really hard to diagnose the issue, it may even be the cause of the problem when it combines and minifies the CSS.

[Amit]

Please check, I have disabled both Wp Super Cache as well as Autopitimze…

[Amit]

If I am enabling the mobile Header, the Logo vanishes and there is no name of site anywhere, whereas, If I disable mobile header, the logo comes in But it’s a line above the Menu and Search button. I want the logo to be displayed between the Menu button and Search icon.

[David]

OK so looks like the hover color bug has gone. So sounds like a caching issue.
So next – where you enabled the mobile header you can add a logo to it. Do that and then i can provide the CSS to get it aligned how you need.

[Author]

Posts