CODEWITHSUNDEEP
csszurb-foundation
user1807777
user1807777

Reputation: 375

custom nav bar Zurb Foundation

I am trying to customize the top nav bar in foundation.

In my style sheet I have this : 

.top-bar{
background: none;
color: #000;
}
.top-bar-section{
    background: none;
}

Here is my html markup: 

<div class="fixed">
<nav class="top-bar" data-topbar>
    <ul class="title-area">
        <li class="name"><h1><a href="index.html">title</a></h1></li>
    </ul>
    <section class="top-bar-section">
    <ul class="right">
        <li><a href="#">item one</a></li>
        <li><a href="#">item two</a></li>
        <li><a href="#">item 3</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</section>
</nav>
</div>
<div class="divider"></div>

It is only changing the background color of the top bar on the left hand side and not on the top-bar-section side.

What am I doing wrong?

Thanks!

Upvotes: 0

Views: 2368

Answers (1)

Adrift
Adrift

Reputation: 59769

.top-bar-section ul,
.top-bar-section ul li.active > a,
.top-bar-section ul li.active > a:hover,
.top-bar-section li a:not(.button),
.top-bar-section li a:not(.button):hover {
    background: none;   
}

Example

Upvotes: 3

Related Questions