[Resolved] Navigation Dropdown Single Row Center Align?

[Webmaster]

Does such a snippet of exist in the GeneratePress databanks? I was wondering if there was a quick customization option to open the dropdown menu in a single row and align center horizontal (or justify align) the sub menu nav items. I was floating around in the docs and I didn’t see anything. Maybe I missed over it?

Here is an example of the menu in the wild:

Desired Dropdown:
Menu Item 1 | Menu Item 2 | Menu Item 3
Dropdown 1a | Dropdown 1b | Dropdown 1c

Default Dropdown:
Menu Item 1 | Menu Item 1 | Menu Item 3
Dropdown 1a
Dropdown 1b
Dropdown 1c

[Fernando]

Hi there,

Here is an article if you may want to do a simple Megu menu: https://docs.generatepress.com/article/building-simple-mega-menu/

Moreover, here is a thread where they successfully changed the submenu to dropdown horizontally: https://generatepress.com/forums/topic/submenu-dropdown-change-from-vertical-to-horizontal/#post-184907

If none of these are working for you, can you provide a link to the site in question, and we’ll see if we can provide an appropriate solution?

Hope this helps. Feel free to reach out if further assistance is needed. 🙂

[Webmaster]

Thanks Fernando, that post from 2016 almost did the job… tweaked code a little bit to get results.

body .sf-menu > li {
	position: static;
}

body .main-navigation ul.menu > li > ul {
    width: 100%;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto;
    text-align: center;
}

body .main-navigation ul.menu > li > ul > li {
    width: auto;
    display: inline-block;
}

body .main-navigation ul.menu > li > ul > li ul {
	left: 0;
	top: 100%;
}

[Fernando]

You’re welcome! Glad to be of assistance! Feel free to reach out if you’ll need assistance with anything else. 🙂

[Author]

Posts