Split menu on either side of logo

Kind of a cool feature - been thinking about how to do this lately.

Just as an idea, what about adding the logo as a menu item?

Go to "Appearance > Menus" and add a custom link.

In the Navigation Label, add the HTML for your logo:

<img src="URL TO YOUR LOGO" alt="" />

It will need some tweaking (removing on mobile etc..), but I wonder if that's the right way to start.

Let me know :)

Hmm... good idea. The logo is now in the center of the menu, but I can't seem to get it centered horizontally with the menu. The bottom of the image is aligned with the bottom of the menu, if that makes sense.

What if I just moved the menu up with like margin-top: -200px; and move each menu item to the side with margin-left and margin-right. Would that create any complications you can think of? (besides mobile...)

Can you link me to your site? I may be able to come up with a solution :)

Thanks Tom, but I think I figured it out. I used the IDs of each menu item and made them float to the right and left, then moved the menu up. It messes up mobile a bit, but I'll figure it out once I get there. My site is still under construction, so I don't want to share the link quite yet. :)

Anything you don't want to apply on mobile can be wrapped in this media query:

@media (min-width: 769px) {
    /* This CSS will not be used on mobile */
}

Hope that helps :)

What code did you end up using to disable the logo-in-menu on mobile, and did you use a hook to display the logo where you do want it to appear on mobile?

If you open the menu item with the logo, give it hide-on-mobile hide-on-tablet classes: https://generatepress.com/knowledgebase/using-menus/#custom-classes

Maybe just use the regular logo on mobile, and hide it on desktop?