Change Arrow color of a Dropdown Menu...

User 2088758 Photo


Senior Advisor
3,086 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
20,181 posts

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
3,086 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
4,782 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>


Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2088758 Photo


Senior Advisor
3,086 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
3,086 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,533 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
4,782 posts
Online Now

Try typing
!important
After the colour for the hover
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 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
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 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>
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/

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.