WIP: When the CSS Loading Method is set to 'External Files', the menu style overrides the Mega Menu style

Everything works fine when the External Files option is not enabled.

#brxe-qkqhis .bricks-nav-menu,
#brxe-yxxcxg .bricks-nav-menu,
#brxe-lhqcjd .bricks-nav-menu,
#brxe-qqxazu .bricks-nav-menu,
#brxe-goooyc .bricks-nav-menu,
#brxe-uwljhz .bricks-nav-menu,
#brxe-feugqp .bricks-nav-menu,
#brxe-smwuop .bricks-nav-menu,
#brxe-zbvwvk .bricks-nav-menu{
flex-direction: column !important;
gap: 0px !important;
} Currently, these menus can only be styled by forcing it with CSS

Hi Mike,
Thanks so much for your report!

However, I am missing specific steps, your templates, and a live link to the website to reproduce the problem specifically.

Best regards,
timmse

Hi Timmse

The first image shows my header structure, and the third image shows my mega menu structure

That’s right. Nevertheless, I asked for a link because it provides much more information than any screenshot could.

https://carvedkeep.com

Hi Mike,
Thanks so much for the link! Now I can see what’s going on and can replicate the issue. However, there’s an easy “fix”: don’t set the main menu direction to row, as it is row by default, so there’s actually no need to set it.

If you set it, it will override the direction of the nested menus, since both selectors have the same specificity, so the loading order decides. In your case, as I said, it’s easy to solve – but if you do it the other way around (main menu = column, nested menus = row), the problem also occurs, and in that case it can really only be solved with custom CSS.

We’ll try to find a solution for this :v:

I’ve switched from inline styles to an external stylesheet, but many styles are inconsistent. It seems like the CSS specificity or rendering has changed after regeneration

That’s a pretty sweeping statement without a specific before/after example :smiley:
I assume that you cleared any caches or perfmatters used CSS after changing the style method?

After clearing Varnish and Perfmatters caches and regenerating the CSS, the spacing is completely off

I’m sorry, but I still don’t know any specifics of your issue. What spacing?! Where is it set, how did it looked like before, and how does it look now?

It sounds like the problem has nothing to do with the one originally reported, so I would ask you to create a new report and provide specific information so that we can get to the bottom of the cause. Thank you!

The first two images show the layout working correctly with inline CSS. However, the next three images show how the external CSS breaks the styling. The checkout page is created with Funnel Builder using Bricks Builder. I have already cleared all caches, but the issue persists

To be honest, I don’t really see any difference here except for the line spacing at the bottom :face_with_monocle:

Please send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase.