CODEWITHSUNDEEP
csshtmltwitter-bootstraptwitter-bootstrap-3
user567879
user567879

Reputation: 5349

Change Side stacked nav color in Bootstrap 3

I have seen many posts regarding this, but couldnt find a good working answer. I have a navigation bar like below in the left side. On the right right side I have carousel.

enter image description here

I made it with the code below

<div class="row"> 
<div class="col-sm-3"> <!-- start of nav items -->
        <ul class="nav nav-tabs nav-stacked">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="/2014/call_for_sessions">About</a></li>
          <li><a href="/2014/volunteer">Brochure</a></li>
          <li><a href="/2014/exhibit">Schedule</a></li>
          <li><a href="/2014/call_for_sessions">Workshops</a></li>
          <li><a href="/2014/call_for_sessions">Talks</a></li>
          <li><a href="/2014/call_for_sessions">Register</a></li>        
</ul>
</div>

What I need is, I need to change the default color and mouseover color of this. What is the best and easiest way of customizing it. I need to get something like in the libreplanet sidebar.

Upvotes: 2

Views: 1963

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362620

You can use the CSS inspector in your browser to see what CSS class names are being controlled by Bootstrap. In this case it's .nav-tabs > li > a. Then override these styles with the appropriate fade effect and margin changes...

.nav-tabs > li > a, .nav-tabs>li.active>a {
    background-color: #999999;
    margin-right: 2px;
    margin-bottom: 5px;
    color: #ffffff;
    border-radius: 5px;
    -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
    -ms-transition: all ease-in-out .3s;
    -o-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}

.nav-tabs > li > a:hover, .nav-tabs>li.active>a:hover {
    background-color: #993333;
    color: #fff;
}

Demo on Bootply

Upvotes: 3

Related Questions