[Resolved] Simple mega menu > how to remove visible column borders?

[Christian]

Hello Support Team,

I’m using a simple mega menu built via your css code (https://docs.generatepress.com/article/building-simple-mega-menu/) added via Tom’s Simple CSS plugin. I did not change anything in the code.
In the customizer of the website the mega menu appears exactly as I need it: 4 columns and block text on white background – no visible column borders.
In “real life”, however, in any browser some visible column borders are appearing – and I cannot figure out, what is going wrong.
Do you have any idea what might cause the appearance of these strange lines – and how to get rid of them?
Thank you for your consideration,
Best, Chris

[Tom]

Hi there,

Try adding this CSS:

.main-navigation ul ul {
    box-shadow: 0 0 0;
}

Let me know 🙂

[Christian]

Thank you, Tom, for your fast reply.
Unfortunately, the code did not solve the problem – I just added it in Simple CSS at the bottom of the “Simple Mega Menu” code and cleaned all caches.
I might send you screenshots of the “clean” customizer (no visible borders (lines)) as well as the “life” site (with these lines), so you know exactly what I try to describe.
Please let me know if you need anything from me…
Thank you, Chris

[Tom]

The CSS on your site only has one 0, instead of three.

If it’s stripping down to one, you may be able to fix it with this:

.main-navigation ul ul {
    box-shadow: 0 0 0 transparent;
}

[Christian]

Hi Tom,
the “transparent” did it! Also on the “life” website there are no visible boarders anymore.
Thank you very much for your fast and effective support.
Best, Chris

[Tom]

You’re very welcome 🙂

[Author]

Posts