Header Logo and Split Menu on Same Line

[Joe]

Hello,

I would like to move the logo up, or the split menu down, so that the menu items sit on the same horizontal line as the logo, similar to in this example: https://www.thedreamhaus.de/

When I do it with a negative margin on either the header on the navigation bar, the logo loses its centering.

Please could you advise how best to do that.

(I am currently using Contained Navigation Width and Inner Navigation Width, Left Aligned with one menu item floated right with class menu-item-float-right)

Thanks!

Joe

[Leo]

Hi there,

Have you tried this first?
https://docs.generatepress.com/article/centering-logo-navigation/

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joe]

Thanks Leo,

That works well on large screen sizes, but it seems to take away the functionality of the Navigation Drop Point (The width when the navigation ceases to float and drops below your logo) in Layout / Primary Navigation. That means that, on smaller screens, the menu goes behind the logo.

Is it possible to keep a Navigation Drop Point using the method you suggested?

[Leo]

I don’t see a way to make that work unfortunately.

Do you only want one menu item on the right side?

The method above is for having the same menu items on each side of the logo/site title.

Also did you change the mobile menu breakpoint? For some reason the toggle isn’t kicking in.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts