Bootstrap .nav-tabs border-bottom won't go away

Question

Okay so I'm using the Bootstrap's nav panels and I have them fixed to the top along with an image bar. The problem is that I cannot remove the bottom-border from it no matter what I try. Here is the code as it is:

.header-wrapper {
font-family: 'Oswald', sans-serif;
}
.top {
background-color: #2960f7;
margin: 0;
padding: 5em 0 4em 0;
width: 100%;
position: fixed;
z-index: 999;
}

.top h1 {
    text-transform: uppercase;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
    color: #fff;
}

.nav-tabs {
border-bottom: none;
position: fixed;
top: 124px;
background-color: #2960f7;
color: #fff;
border-color: #fff;
z-index: 1000;
}

.nav-tabs .active {
    color: #2960f7;
}

.nav-tabs li a:hover {
    background-color: #fff;
    color: #2960f7;
}

.nav-tabs li, .nav-tabs li a {
    color: #fff;
}

And the HTML of the tabs and header:

<div class="header-wrapper">
   <div class="top">
        <h1>Title</h1>
    </div>        
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="skillset.html">Skillset</a></li>
        <li><a href="history.html">Work History</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>

When I look at it I see the line in the CSS element in Chrome that shows the .nav-tabs {border-bottom: 1px solid #ddd}.

JSFiddle: https://jsfiddle.net/ghstet23/3/

The long and the short, how can I get that bottom border to go away if setting .nav-tabs to bottom-border: none; won't work?

There should be three dependencies with this if it did not go through: `http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js` `https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js` `http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css` — buddthechud, Aug 06 '15 at 18:05

score 2 · Accepted Answer · edited Aug 06 '15 at 20:16

2

I had to add the following code to the head

<style>
  .nav-tabs { 
    border-bottom: none;
 }
</style>

edited Aug 06 '15 at 20:16

Vasseurth

6,354
12
53
81

answered Aug 06 '15 at 18:26

buddthechud

55
1
9

score 0 · Answer 2 · answered Aug 06 '15 at 17:23

0

If by bottom border you mean the underline under your nav options you can use text-decoration: none; like so in your css:

.nav-tabs li, .nav-tabs li a {
    color: #fff;
    text-decoration: none; /* Add this */
}

answered Aug 06 '15 at 17:23

gffbss

1,621
1
17
19

Got it, I might suggest trying `margin-bottom: 0;` on the `.nav-tabs` class. This is just going off the fiddle, which is obviously a bit different from your actual page, but let me know! – gffbss Aug 06 '15 at 17:36
Well the nav is the same I'm using the colors to detect the bottom border. let me update the fiddle – buddthechud Aug 06 '15 at 17:38
Updated the fiddle so that you can see the static bottom border. This is really all I want is for that white spot under my nav to not be there. – buddthechud Aug 06 '15 at 17:44
Does your fiddle look like this also? http://imgur.com/14h9wct I must be missing some dependencies? – gffbss Aug 06 '15 at 17:56
Yea there's three dependencies that you don't have. Did they not go through when I shared? ->`http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js` `https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js` `http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css` – buddthechud Aug 06 '15 at 18:02
I see those in there, it may just be something with my fiddle on my machine :( Is your site deployed anywhere or are you running locally? – gffbss Aug 06 '15 at 18:19
Running it local off of VS – buddthechud Aug 06 '15 at 18:26
@gffbss it is the mixed protocols in the dependecies use this one https://jsfiddle.net/ghstet23/7/ – Federico Giust Aug 06 '15 at 18:48
@buddthechud try setting `border-bottom: 0` on the class `.nav-tabs` rather than `none`. Let me know! http://imgur.com/ndu8lJS – gffbss Aug 06 '15 at 19:18

Federico Giust · Answer 3 · 2015-08-06T18:50:38.403

0

On the bootstrap.min.css there is a border set on hover

.nav-tabs>li>a:hover {
    border-color: #eee #eee #ddd;
}

On your local stylesheet after you load bootstrap add this to override the bottom border

.nav-tabs>li>a:hover {
    border-bottom-color:#fff;
}

To remove the white border at the bottom

.nav-tabs { border-bottom: none; }

Check it here

JSFiddle

edited Aug 06 '15 at 18:50

answered Aug 06 '15 at 17:26

Federico Giust

1,803
4
20
45

@buddthechud That's ``.nav-tabs { border-bottom: 1px solid #ddd; } ``change that to whatever color you want or make it transparent – Federico Giust Aug 06 '15 at 17:42
Okay so it apparently works in Fiddle but not in the browser... Going to restart the debug in VS. -> Restarted and it is still showing in all browsers so something in Fiddle is following the rules when nothing else is... – buddthechud Aug 06 '15 at 17:58
@buddthechud Where did you put the ``.nav-tabs`` to override the border-bottom ? Is it after the bootstrap is loaded ? – Federico Giust Aug 06 '15 at 18:44
@buddthechud Whenever you add dependencies on JSFIddle make sure you don't include the http or https to avoid mixed protocols issues – Federico Giust Aug 06 '15 at 18:51

score 0 · Answer 4 · edited May 23 '17 at 11:46

Remember, styles are inherited. Start butchering it from the top-parent down to find your anomalies.

For example, if you have a div inside a div inside a wrapper div, and you apply a border to the wrapper, both inner divs will get borders also.

In that example, if you are like "hey wtf, I only wanted the parent to have a border." Then, you would add "border: none;" to BOTH inner divs.

A person would also be interested in: http://www.w3schools.com/cssref/sel_element_gt.asp

eg:

 div > div > * {
   border: none;
 }

Select all child elements recursively in CSS

Bootstrap .nav-tabs border-bottom won't go away

4 Answers4