When I make a multiple column mega menu, I am getting tiny hairline vertical lines between the panels.
Can you tell me how to remove them entirely from sub-menu — or an example on how to remove just one?
In order to move the menu to the left to the same spot for each sub-menu, I have put in 4 columns (two with just a dash (-) ).
But the hairlines then look a tad peculiar!
I was trying to center each same-width sub-menu.
Thanks for any hints.
Hey CharlieTh,
Could you provide us with a link to the site in question so that we can take a closer look please?
Best regards,
Rikard
Appreciate you answer, Rikard!
This is a test page, but here’s the URL:
http://trackitanywhere.com/menu-mega-dropdown-menu/
The thin gray vertical lines I’d like to get rid of — particularly for columns 3 and 4, which are just to make the menu wider to cover an element on a particular page. (Not currently on this one, but…)
Any ideas?
Hi!
Thank you for the link. You can add this in the Quick CSS field in order to remove the mega menu border:
#header .avia_mega_div .units {
border-right-width: 0;
}
Cheers!
Ismael
Thank you, Ismael.
It works perfectly for ALL the thin gray vertical hairline lines between the columns on mega menu.
Using it, I tried to figure out the CSS to JUST remove the last two hairline lines that are on empty columns.
However, I have failed.
If you have a moment, would you take a look and see what that CSS might be?
Thank you for the “ALL” answer. If I can’t do specific hairlines, it is still great answer!
Hi!
This should work:
#top #header .avia_mega_div>.sub-menu>li:nth-child(n+2) {
border-right: 0;
}
Regards,
Ismael
Thank you, Ismael — worked perfectly…it goes into my “library” of Kriesi magical fixes! NOT that Enfold needs fixing…but the fact that it can so be tweaked so marvelously is a treat!