WIP: Mega Menu dropdown Icon not taking styles

Browser: Chrome Version 126.0.6478.127 (Build officiel) (arm64)
OS: macOS Sonoma (latest)

When using the “planned” way of styling elements in of the Mega Menu: using the “Dropdown” element and choosing “Icon” in the styling tab, and setting an icon size, it has no effect because the styles are being inherited from the “Nav (Nested)” element that is further up in the DOM structure.

This should not happen since it forbids styling the icon differently than the texts.

Screen captures show the “1em” set to icons in the styling tab and the outputted CSS where the style is overriden by the “Nav (Nested)” element styles.

I do not want to style the texts using the “dropdown” elements, simply because not all menu items in the menu are dropdowns, some are plain text/links.


Hi @AnLip ,

thank you for your bug report. Just to confirm it, this happens when you set “Typography → Font Size” in the “Top Level (Item)” menu, right? This was, so I was able to reproduce it.

If not, can you please record a video with steps to reproduce the problem, so I can investigate further.

Best regards,
M

Hi,

No, this icon size of “1em” is set in the “ICON” tab of the “Dropdown” element.

There is no icon styling available if you go to the “Nav (Nested)” element that contains the entire Mega Menu, only “Top Level (Item > Typography” but then that affects the entire typo + headings + icons, which is not what we need.

Thanks.

Hi @AnLip,

yeah, that is what I was asking. Maybe I was not clear enough, sorry for that!

This is indeed a problem and we are aware of it (it’s already on our task list), and there is a similar report already:

In the previous report, the user described different properties, but yours is the same. My suggestion would be to add !important to the icon size, but I know this is not the best, or use classes on the Dropdown elements to style them, and not even use Top Level (Item) settings.

Best regards,
M

1 Like

Still an issue with 2.0. Menus inserted in the mega menu section inherit styles from the main menu. This makes styling very hard.
The Element class .bricks-nav-menu is overriding the custom class.
When editing the mega menu section, it looks fine, but in other instances (front and other templates’ canvas), it is incorrect.

Setting every property explicitly rectifies the problem.