CODEWITHSUNDEEP
htmlcsssasszurb-foundation
Sylar
Sylar

Reputation: 12092

Change color of Foundation drowpdown arrow in topbar

Been trying to change the dropdown arrow in the topbar of Foundation 6 but no luck with this forum answer.

I do not see those classes in my Foundation 6, so what I did was:

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

But still has not change.

HTML (ruby):

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">
        <%= image_tag('logo.png', size: '40x40') %>
      </li>
      <li>
        <a href="/">Dashboard</a>
      </li>
      <li>
        <a href="#">Accounts</a>
        <ul class="menu vertical">
          <li><%= link_to 'Sales', sales_path %></li>
          <li><%= link_to 'Inventory', inventory_path %></li>
        </ul>
      </li>
      <li><%= link_to 'Settings', settings_path %></li>
    </ul>
  </div>
</div>

Upvotes: 1

Views: 1554

Answers (3)

3rdthemagical
3rdthemagical

Reputation: 5350

I see you use scss, so you can configure foundation variables to change components view. Here is the list of all available variables. Change $dropdownmenu-arrow-color to set new color to arrow.

Upvotes: 1

Vikas Pareek
Vikas Pareek

Reputation: 102

Please use this:- 

.top-bar .is-dropdown-submenu-parent > a:after {
  border-color: #FF0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)!important; 
 }

Upvotes: 1

Vucko
Vucko

Reputation: 20844

It's due CSS Specificity. The "default" Foundaiton selector is 

.dropdown.menu > li.is-dropdown-submenu-parent > a::after{}

Notice the first part of the selector, it uses two classes - .dropdown and .menu while your selector uses only .top-bar. And on the second part the li selector is also used. Compare those two CSS selectors with this CSS specificity calculator.

So, use that selector:

.dropdown.menu > li.is-dropdown-submenu-parent > a::after{
    border-color: #FF0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

Or you can use !important.

Upvotes: 0

Related Questions