Change class="active" bg color

Question

This is sort of a 2 part question although I am sure the answer to one will most likely shed light on the second, if not resolve it.

I am using foundation 4 with rails 3.2.13 and have it working. I changed the background color of the top-bar however the links when moused over still change to the dark grey as well as the one link that is the active link, i.e. when on the homepage the "Home" link has a class="active" attribute in the li element tag is also still dark grey and not a darker version of my nav bar background color. I have tried adding my own .active { background-color: #f00; } to my global css file and it will change an h1 element that I have in the content area of my page but not the link in the nav bar. I have edited both the $top-bar and $section (since the links are actually contained within a section div) variables but no change.

For the life of me I cannot seem to be able to change the active or hover background-colors. I am sure that I am missing something really simple but can't seem to track it down.

Any help you can provide would be awesome. Thanks, Patrick

Here is some related code...

foundation_and_overrides.scss
...
//
// Section Variables
//

// We use these to set padding and hover factor
 $section-padding: emCalc(15px);
 $section-function-factor: 10%;

// These style the titles
$section-title-color: #333;
$section-title-bg: #eee;
$section-title-bg-active: darken($section-title-bg, $section-function-factor);
$section-title-bg-active-tabs: #fff;

// Want to control border size, here ya go!
 $section-border-size: 1px;
 $section-border-style: solid;
 $section-border-color: #ccc;

// Control the color of the background and some size options
 $section-content-bg: #fff;
 $section-vertical-nav-min-width: emCalc(200px);
 $section-bottom-margin: emCalc(20px);

...

//
// Top Bar Variables
//

// Background color for the top bar
// $topbar-bg: #111;
$topbar-bg: #008000;

// Height and margin
// $topbar-height: 45px;
$topbar-height: 75px;
// $topbar-margin-bottom: emCalc(30px);

// Control Input height for top bar
// $topbar-input-height: 2.45em;

// Controlling the styles for the title in the top bar
// $topbar-title-weight: bold;
// $topbar-title-font-size: emCalc(17px);
$topbar-title-font-size: emCalc(28px);

// Set the link colors and styles for top-level nav
// $topbar-link-color: #fff;
// $topbar-link-weight: bold;
// $topbar-link-font-size: emCalc(13px);
$topbar-link-font-size: emCalc(18px);

/* copied from website */

$topbar-link-color: #eee;
$topbar-link-color-hover: #00f;
$topbar-link-color-active: #0f0;
$topbar-link-weight: bold;
$topbar-link-font-size: emCalc(18px);
$topbar-link-hover-lightness: -30%; /* Darken by 30% */
$topbar-link-bg-hover: darken($topbar-bg, 3%);
$topbar-link-bg-active: darken($topbar-bg, 3%);

/* =================== */

// Style the top bar dropdown elements
// $topbar-dropdown-bg: #333;
// $topbar-dropdown-link-color: #fff;
// $topbar-dropdown-toggle-size: 5px;
// $topbar-dropdown-toggle-color: #fff;
// $topbar-dropdown-toggle-alpha: 0.5;
// $dropdown-label-color: #555;

// Top menu icon styles
// $topbar-menu-link-transform: uppercase;
// $topbar-menu-link-font-size: emCalc(13px);
// $topbar-menu-link-weight: bold;
// $topbar-menu-link-color: #fff;
// $topbar-menu-icon-color: #fff;
// $topbar-menu-link-color-toggled: #888;
// $topbar-menu-icon-color-toggled: #888;

// Transitions and breakpoint styles
// $topbar-transition-speed: 300ms;
// $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout
// $topbar-media-query: "only screen and (min-width "#{$topbar-breakpoint}")";

@import 'foundation';

This is my global app scss file app_styles.scss @import 'foundation';

#error_explanation {
    @include alert;

    width: 450px;
    border: 2px solid #c00;
    padding: 7px;
    padding-bottom: 0;
    margin-bottom: 20px;
    background-color: #e4d2d2;
    h2 {
        text-align: left;
        font-weight: bold;
        padding: 5px 5px 5px 15px;
        font-size: 1em;
        margin: -7px;
        margin-bottom: 0px;
        background-color: #c00;
        color: #fff;
    }
    ul li {
        color: #c00;
        margin: 5px 5px -10px 15px;
        font-size: 12px;
        list-style: square;
    }
}

.active {
    background-color: #f00;
}

This is the nav-bar in my application layout file

<nav class="top-bar">
  <ul class="title-area">
    <!-- Title Area -->
    <li class="name">
      <h1><%= link_to "Checkbook", root_url %></h1>
    </li>
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Left Nav Section -->
    <ul class="left">
        <%= render "nav_bar" %>
    </ul>

    <!-- Right Nav Section -->
    <ul class="right">
        <% if current_user %>
            <li><%= link_to "Welcome back " + current_user.display_name, current_user %></li>
            <li class="divider"></li> 
            <li><%= link_to "Log Out", log_out_path %></li>
        <% else %>
            <li><%= link_to "Log in", log_in_path %></li>
            <li class="divider"></li> 
            <li><%= link_to "Sign up", new_user_url %></li>
        <% end %>
    </ul>
  </section>
</nav>

This is the homepage links

<li class="active"></li>
<% if current_user and current_user.is_admin? %>
    <li class="divider"></li>
    <li><%= link_to "Users", users_path %></li>
<% end %>
<% if current_user %>
    <li class="divider"></li>
    <li><%= link_to "Portfolios", portfolios_path %></li>
<% end %>

This is the content I mentioned that changes using the class="active" in the h1 element

<div class="active">
    <h1 class="">Welcome...</h1>
</div>

Please let me know if you would like to see anything else.

Answer 1

Put this to your global css for change background top-bar li active :

.top-bar-section ul li.active > a {
  background: #0f0;
}

I have tried, its work.