[Resolved] Horizontal Sub Menu

[Mike]

Hello,

Is there a way to make the sub menu horizontal?

I would like to have a user hover over a main menu item and then a sub menu appear below the main menu with the same width and height containing the sub menu items in horizontal format next to eachother instead of on top of eachother.

Im at a bit of a loss with this one and really need to go to bed!

Any help would be much appreciated.

Thanks,
Mike

[Mike]

https://generatepress.com/forums/topic/submenu-dropdown-change-from-vertical-to-horizontal/#post-184907

Just found that, question, is there any way to make that menu the same width as the page and not just the primary menu items?

Thanks,
Mike

[Leo]

Hi there,

Are you thinking about a simple mega menu?
https://docs.generatepress.com/article/building-simple-mega-menu/

Let me know if this helps 🙂

[Mike]

Hello,

Thats kind of it. I actually already managed to make it work the way I want using the CSS in the following link,

https://generatepress.com/forums/topic/submenu-dropdown-change-from-vertical-to-horizontal/#post-184907

However my problem is now making that sub menu the full width of the page with 25px borders on each side to match my page sections content.

I have tried a few things however have been unable to do it.

Any help is much appreciated.

Thanks,
Mike

[Leo]

I believe this method here should fixes it: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

Should give you the same layout as well.

[Mike]

Hello,

That looks closer to what I want, but its not quite there!

I want to still retain the header and menu etc however I just want to make the sub menu the full width of the page and not just the width of the primary menu as it currently is.

Thanks,
Mike

[Leo]

I’m not seeing the solution being implemented.

You should end up with the exact same layout as you have right now but with the submenu being full width.

[Mike]

Hello,

It has kind of worked, but it has removed my site title which I would ideally like to keep…

Thanks,
Mike

[Mike]

Hello,

I have now tried adding my logo, and I cannot get that to display.

The HTML seems to be there, but the logo itself wont display.

Thanks,
Mike

[Mike]

Hello,

Also just noticed this breaks the way it looks on mobile.

I still want the menu button to be center aligned with the search button below the logo on mobile.

I think it may be easier to revert to the method before and work out the CSS to make it full width from there.

Thanks,
Mike

[Leo]

The logo is there. Just a bit small to show.

You can either use this CSS remove the padding:

.main-navigation .navigation-logo img {
    padding: 0;
}

or increase the menu item height:
https://docs.generatepress.com/article/menu-item-height-width/

or both.

And if you want the original mobile layout, then adjust the CSS to this:

@media (min-width: 769px) {
    .site-header {
        display: none;
    }
}

I don’t see a CSS fix with the original set up unfortunately.

[Mike]

Hello,

The mobile menu is still aligned to the extreme right and I really need it center as it was before.

Any ideas?

I have used the CSS media query to hide the header only on desktop which makes the header text display on mobile however the menu and search below it is still aligned to the right instead of the center where I would like it.

The logo however is all working a treat! 🙂

Thanks,
Mike

[Leo]

Try this:

@media (max-width: 768px) {
    .nav-aligned-right.nav-below-header .main-navigation {
        display: flex;
        justify-content: center;
    }
}

[Mike]

Hello,

That did not seem to work? I just need it to be on mobile exactly how it was before.

Thanks,
Mike

[Leo]

Edited the CSS above.

[Author]

Posts