Change color of the arrow on a...

User 2803868 Photo


Registered User
4 posts

In FF how can you change the color of the arrow in an accordion menu. I need to do this because of the background chosen for the website. I sure it has to do with the Class being use of NESTED.
User 2699991 Photo


Registered User
2,327 posts
Online Now

Which accordion are you using
The Help You Need: When You Need It The Most
User 2846109 Photo


Ambassador
340 posts

Do you mean the downward facing triangle in the 'menu with dropdown'?

I couldn't figure it out either, if that's the case. Sorry.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2803868 Photo


Registered User
4 posts

Yes, the downward facing triangle. I just happen to be using the accordion menu. It is not the simple accordion component in FF.
User 2846109 Photo


Ambassador
340 posts

Well, I finally found the triangle in the code. This is in Firefox developer edition, btw. Not sure if this helps but might be a start to tracking it down in RFF.

http://imgur.com/pE2m3en.jpg
Attachments:
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2699991 Photo


Registered User
2,327 posts
Online Now

It's in foundation.min.css

you can only get to it after exporting

open foundation.min.css in html editor

do a find (if you have one) ..... " li.is-dropdown-submenu-parent " change the border colour to the one you desire.
http://balismartproperty.coffeecup.com/storage/change-arrow-colour.jpg
The Help You Need: When You Need It The Most
User 103173 Photo


VP of Software Development
0 posts

Try this. Paste this into the <HEAD> section (or link it in via a custom.css file). You can then adjust the colors to fit your needs. This example has it set to orange.

<style>
.is-drilldown-submenu-parent > a::after,
.is-dropdown-submenu li.is-dropdown-submenu-parent.opens-right > a::after {
border-color: transparent transparent transparent #e86621;
}
.js-drilldown-back > a::before {
border-color: transparent #e86621 transparent transparent;
}
.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
border-color: #e86621 transparent transparent transparent;
}
</style>

Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.

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.