Good afternoon fellow designers. I was wondering if any of you came across a way to change the color of the arrow on a dropdown menu made with Foundation. I have looked it up on both the forums and Foundation website and when I alter the css that is supposed to change the color it has no impact. 99 of the time a white arrow is fine but this instance i have a white background menu and I need the arrow black.

Thanks in advance.

Link? Or project?

Its really in any dropdown menu that is built with foundation. The example I gave here is not finished but you can see it here in action. They are all white but I want to change the color to something darker.

https://misterwebguy.com/shatkowski-homes_exported/

Thanks for looking Eric

<style>
.dropdown.menu > li.is-active > a { backgroud: transparent; color: #000000; text-shadow: none; }
.dropdown.menu .is-active > a:hover {
color: #ffffff;
background-color: #000000;
}
</style>

Honestly I dont know why they dont fix this issue with the application. This along with the is active link you have to manually override as well. I figured out how to make it so its not the default blue.

Starting to be too much customization after export especially for the menu.

Thanks I will try this.

Sadly this didnt work. It only changed the background color of the list item and not the arrow itself.

I saw something the other day that might be of use, but I haven't tested it. It's at https://fabriceleven.com/design/clever- … rrow-icon/ . Although it relates to <select> dropdowns, it may work as it's seems to be simply replacing/overlaying the icon.

Frank

Try typing
!important
After the colour for the hover

Hi Steve
Use another menu, or make one, I do it all the time nowadays, if I need one with a dropdown, easy peasy, hardly ever use a component nowadays.

I can send you a video "How To" if you don't get a result, just let me know

Try This

<style>
/* DROP COLOR REPAIR */
.dropdown.menu .is-active > a {
color: #fff!important;
background-color: #000!important;
width:auto;
}
.dropdown.menu .is-active > a:hover {
color: #000!important;
background-color: #fff!important;
}
/* DROP SUB PANEL CUSTOMIZING */
.is-dropdown-submenu {
border: 1px solid #000!important;
min-width: 100%;
width:auto;
}


/* CUSTOM ARROW COLOR for ACCORDION MENU */
.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after {
border-color: #000!important transparent transparent;
}
.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a:hover:after {
border-color: #fff!important transparent transparent;
}
</style>