Change Arrow color of a Dropdown Menu

User 2088758 Photo


Senior Advisor
2,985 posts

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.
Attachments:
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 187934 Photo


Senior Advisor
19,684 posts
Online Now

Link?;) Or project?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2088758 Photo


Senior Advisor
2,985 posts

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
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2699991 Photo


Registered User
3,752 posts
Online Now

Steve wrote:
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>



The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2088758 Photo


Senior Advisor
2,985 posts

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.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2088758 Photo


Senior Advisor
2,985 posts

Sadly this didnt work. It only changed the background color of the list item and not the arrow itself.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 379556 Photo


Registered User
1,248 posts

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
User 2699991 Photo


Registered User
3,752 posts
Online Now

Try typing
!important
After the colour for the hover

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2699991 Photo


Registered User
3,752 posts
Online Now

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

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2699991 Photo


Registered User
3,752 posts
Online Now

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>

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.