Archived topic

only one sub-menu displayed horizontally

3 replies · Started by zhu on February 26, 2020

Viewing posts 1–4 of 4

February 26, 2020 at 5:53 pm #1178124

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.

February 27, 2020 at 2:41 am #1178383

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

February 27, 2020 at 8:03 pm #1179288

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

February 28, 2020 at 5:01 am #1179496

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

This archived topic is closed to new replies.

Start building better websites today.