Split menu on either side of logo

[Kate]

Hi Tom,

I was wondering if you could help me figure out a way to split the menu so it’s on either side of my header logo, like on this site: http://www.maiedae.com/

Thanks!

[Tom]

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 🙂

[Kate]

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…)

[Tom]

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

[Kate]

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. 🙂

[Tom]

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 🙂

[Jacks McNamara]

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?

[Tom]

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?

[Author]

Posts