Pseudo elements cannot be applied to links with dropdown menus
pcross1986 opened this issue · 2 comments
How can this bug be reproduced?
Add a pseudo :after element to a link in top bar menu, THAT HAS A DROPDOWN MENU.
What did you expect to happen?
I expected a :after element to apply to all links, INCLUDING links that host a drop down menu.
What happened instead?
Every link, EXCEPT the link menu item that has a dropdown menu.
EXTRA NOTES:
I have even manually added a class to my parent menu link, ".act-right". which in Wordpress, adds the class to the 'li' element.
My current CSS/SASS code for the element looks like:
.act-right a {
&:after {
content: attr(title);
display: block;
font-weight: 700;
height: 0;
overflow: hidden;
visibility: hidden;
transition: ease-in-out 300ms all;
}
}
Get rid of this ish!
This will make you want to kill someone.... But this seems to be the code not allowing pseudos to be applied to links with dropdowns.
Ive never had so much trouble styling a menu when it comes to Foundation topbar.
.dropdown.menu .has-submenu.is-down-arrow > a::after { border: 0; }
.dropdown.menu:first-child > li.is-dropdown-submenu-parent > a::after { display: none; }
You are right, most of the styling in the navigation.scss file should be removed.
I think we should stay as near to the foundation-sites styles as possible.
There is no reason for this styling.