Menu icon Foundation
Styling drop down menu font color

I'm trying to use SCSS to modify Foundation. I noticed there's a way to set color for the dropdown menu arrows but not the text color. I didn't see it in the documentation. http://foundation.zurb.com/sites/docs/dropdown-menu.html

 

foundation 6dropdown

I'm trying to use SCSS to modify Foundation. I noticed there's a way to set color for the dropdown menu arrows but not the text color. I didn't see it in the documentation. http://foundation.zurb.com/sites/docs/dropdown-menu.html

 

This post has been closed. No new replies can be added.

Rafi Benkual almost 2 years ago

There are lot's of variable but not a variable for everything. The variables that do exist are things that change often or are hard to change in CSS.

So this works:

.menu {
  a {
    color: $light-gray;
  }
}

S. Lucas almost 2 years ago

That's what I ended up doing.

Having a variable for submenu arrows might be helpful to have. We have a different background color for submenus so I ended up having to style the sub arrows like this.

li{

a{
color: $norwex-blue;
font-weight:bold;

}
&.is-dropdown-submenu-parent {
&.opens-right > a::after {
border-color: transparent transparent transparent $norwex-blue;
}
}
}