[Support request] only one sub-menu displayed horizontally

[zhu]

I want the sub-menu in the menu to be displayed horizontally.It is a pity that the shown as the picture (http://best-badge.com/wp-content/uploads/2020/02/best-bagdge.png) after I add the CSS .I want to make it only in one line, and then I only need this sub-menu to display horizontally, other sub-menus in the main menu do not need.

[David]

Hi there,

remove your current CSS and try adding this:

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

body .main-navigation ul.menu>li.horizontal-menu>ul {
    width: 100%;
    left: 0 !important;
}

body .main-navigation ul.menu>li.horizontal-menu>ul>li {
    width: 16.66%;
}

Then edit your Menu and give the Badge & Pin parent menu item a CSS class of: horizontal-menu
This article explains how:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

[zhu]

i replace css code you gave me . it is a pity that sub-menu become Vertical.you can see https://best-badge.com/

[David]

You need top add the horizontal-menu CSS class to your menu item.
This articles explains how to add CSS classes to your menu:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

So you must edit your Menu and select the Badge & Pin parent menu item and in the CSS class (optional) field add this: horizontal-menu

[Author]

Posts