Menu icon Foundation
How to change the colour of a menu dropdown arrow

I've been trying to customize my navbar, but I can't make sene of how to change the colour of the dropdown arrow. Can I get some help? Is there any documentation that explains how all of this stuff is put together?

navbar

I've been trying to customize my navbar, but I can't make sene of how to change the colour of the dropdown arrow. Can I get some help? Is there any documentation that explains how all of this stuff is put together?


Lynda Spangler gave the most helpful answer for this post
Lynda Spangler over 5 years ago

Try this to make a red arrow:

.top-bar-section .has-dropdown > a:after {
    border-color: #FF0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

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

dave caskey over 5 years ago

this is the rendered css that controls that caret:

.top-bar-section .has-dropdown > a::after

need to modify the border-color attributes.

Richard Smith over 5 years ago

sorry, I should have mentioned that I already tried " .top-bar-section .has-dropdown > a:after " without success.

 .top-bar-section .has-dropdown > a:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: inset 5px;
      border-color: red;
      border-left-style: solid;
      margin-right: 15px;
      margin-top: -4.5px;
      position: absolute;
      top: 50%;
      right: 0; }

Lynda Spangler over 5 years ago

Try this to make a red arrow:

.top-bar-section .has-dropdown > a:after {
    border-color: #FF0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}