NO BUG: Nav nestable: Dropdown item padding

Browser: Chrome 127.0.6533.120
OS: Windows

Hi bricks team,

I have created a mega menu using nav nestable. If we use the padding control in Nav Nestable > drop down > item > padding, it doesn’t work at all.
But if we set it directly in dropdown > content > item, it works.

Shouldn’t these two options work similarly? Or I am wrong.

Thanks

Hi @HOSEIN,

yes, they should work the same. I tested both and it seems to work on my end. As you can see in the image below, I set 20 in one control and 40 in the other, and they both work.

Can you make sure there are no other custom styling that would override this?

Best regards,
M

Yes, no problem. Could it be because of the structure? Because I use a container inside the content.

Oh yeah, it’s exactly this I would say. Padding controls apply to the a links directly inside a content (li).
You will have to set padding individually for each container - or assign a class to each one and change it there.

Btw, please check this academy article below, as “Container” elements are not really suitable for usage inside a dropdown (or anywhere else, except directly under the section) - it’s better to use block or div :slight_smile:

Best regards,
M

thank you @Matej,

I used the container so that the mega menu content follows the width of the site content. Thanks for sharing the article, i will definitely read it.
I totally agree with you, but I still believe that the item padding on the dropdown element works differently than the nav element item padding.

If the dropdown is inside a nav nestable, the item padding option in the nestable nav will behave as you mentioned. (targets li)
But if we control the item padding directly from the dropdown element, it targets .brx-dropdown-content.
Please note in my example, that there is no li inside mega menu and the image element is used.

Hey.

First, I’m sorry, as I overlooked that you use the “Mega menu” option in the dropdown. Now I can see what you mean.

I think it’s not a bug, but it’s just the way it works. Because you enable “mega menu” on the “Drodpown” element and once you enable that, the element is behaving differently.
Now, when you style “dropdown” it makes sense to style those properties in the mega menu, but you could have multiple dropdowns, and not everyone would be a mega menu. And in this case, if you would style it on the “Nav nested” element, it would mess with the styling of both of them, which I think it’s not what we want.

Imagine that you would change padding for a dropdown item on your “nav nested” element, and would change it on the mega menu and on normal dropdowns. I think it would cause more confusion than not.

That’s why I would mart it as a NO BUG, but thank you for your consideration about this.

Best regards,
M

Hi, thanks as always for the great comment

1 Like