problem with mega menu

[SerGun78]

Hy, all. When setting the main menu in the one template to display only up to level 2, the item in the standard menu mode is displayed correctly, i.e. without displaying third level items. But when we switch the menu item to the mega menu mode, zone lines from the third level appear, but the items themselves are not visible.

[Chacapamac]

@SerGun78

I just try and this is what I get — Are You sure you have a “Menu Item” to display in the Level 3 sub-menu?

[SerGun78]

I have three menu levels, but I don’t display the third, the settings are visible on the screenshots. In normal menu mode, the third level items are not visible, that's right. When I switch to mega menu mode, the third level is also not visible, but horizontal lines from this menu are visible.

[Chacapamac]

@SerGun78 I think I understand. — How did you hide the third level? — I think you will have Target the element specifically in the Mega Menu and hide the top bar by css

This is just some test I’m doing now, not to sure how to target specifically where the menu item get is top border because it’s made on a non-specific “ul” item — I will check again....

.megamenu-container, .megamenu-container .nav-submenu .nav-submenu {
  border-top: 4px solid rgba(40, 167, 69, 0.4);
}

• What do you want to achieve exactly? • Why have an item hidden on a menu?

[SerGun78]

menu in the header, I want to display all menu items no further than 2 levels, so that large nesting is not visible, i.e. Level 3 is not needed there. I use the third level as navigation to anchor links for the landing page, to the site pages to which the second level menu item leads. At the same time, I use the menu module in a different position - content-top and display only level 3-3 in it

[Chacapamac]

I see, I think it will be hard to target the top border only as it is definite on a non-specific element, but my example above give me an idea. ( ul .nav-submenu)

On my example you can see that the CSS making this border is: .megamenu-container .nav-submenu .nav-submenu

Remark the 2 .nav-submenu in there. The logic here is that the border target here the second submenu (or third level). By logic you should be able to add any “.nav-submenu” there to target a specific sub-menu level.

.megamenu-container .nav-submenu .nav-submenu { border-top: none or transparent — Maybe you will have to insert the “!important” to force it? }

.megamenu-container .nav-submenu .nav-submenu {
border-top: none !important;
} 

For me this will target ONLY the third level (second sub-menu)