CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
JCMcRae
JCMcRae

Reputation: 257

Changing The Width and Look of Bootstrap Nav-Pills

I have a navigation bar set up using nav-pills. I have the bar horizontal and justified, so they all line up nicely, but I want to change the width of the nav-pills so that I can make them more even with the everything else on the website. Here is my code for the navigation bar:

<div class="container" id="buttonBar">
<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="index.html">HOME</a></li>
  <li><a href="about.html">ABOUT</a></li>
  <li><a href="video.html">VIDEO</a></li>
  <li><a href="photo.html">PHOTOGRAPHY</a></li>
  <li><a href="artists.html">ARTIST PORTFOLIOS</a></li>
</ul>
</div>

On a custom CSS file I made, I tried doing the following:

.nav .nav-pills .nav-justified li a {
    width: 50px;
}

But to no avail. What would be the right way for me to do this? And could anyone also tell me how to change the color of both the text and the color of the nav-pill? I want to make the background color transparent.

Upvotes: 0

Views: 5484

Answers (1)

Drown
Drown

Reputation: 5982

Your CSS selector is incorrect. The space between the first three classes means that they are children, and not that the element has all three classes.

Try this instead : 

.nav.nav-pill.nav-justified li a {
    width: 50px;
}

If you can't get it to work, a fiddle or something would be useful.

Upvotes: 4

Related Questions