olefredrik / FoundationPress

FoundationPress is a WordPress starter theme based on Foundation 6 by Zurb
https://foundationpress.olefredrik.com
MIT License
2.71k stars 871 forks source link

Pseudo elements cannot be applied to links with dropdown menus #1364

Closed pcross1986 closed 5 years ago

pcross1986 commented 5 years ago

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;
  }
}
pcross1986 commented 5 years ago

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; }

derweili commented 5 years ago

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.