EllisJ98 EllisJ98 - 4 months ago 27
CSS Question

White line underneath my transparent nav bar Bootstrap

For some reason there is a line underneath my Nav bar that stays there. It is fixed so when it scrolls down it stays. Here is what it looks like:

enter image description here

I'm not really sure why. Here is my Nav HTML code:

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">
<a class="navbar-brand" href="">
<img id="brand-image" alt="Website Logo" src="https://s0.wp.com/wp-content/themes/vip/techcrunch-2013/assets/images/logo.svg"/>
</a>

</div>

<ul class="nav navbar-nav navbar-left">
<li><a href="index.html"> Home </a></li>
<li><a href="#"> Discover </a></li>
</ul>


<ul class="nav navbar-nav navbar-right">
<li><a href="#"> Login </a></li>
<li><a href="#"> Sign up </a></li>
</ul>
</div>
</nav>


Here is my CSS code for the nav:

.navbar {
background:none;

}

.navbar .nav > li > a {
color:white;

}

.navbar-brand {
padding: 0px;

}
.navbar-brand img {
height: 100%;
padding: 15px;
width: auto;
}

Answer

Add border: 1px solid transparent; to your navbar rule.

You also have an extra a tag (<a href="#" class="navbar-brand">).

Working Example (with added mobile toggle fucntion).

html,
body {
  background: darkblue;
}
/*THE ABOVE BACKGROUND RULE IS FOR DEMO ONLY*/

.navbar.navbar-default {
  background: none;
  border: 1px solid transparent;
}
.navbar.navbar-default .nav > li > a {
  color: white;
}
.navbar.navbar-default .navbar-brand {
  padding: 0px;
}
.navbar.navbar-default .navbar-brand img {
  height: 100%;
  padding: 15px;
  width: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">
        <img id="brand-image" alt="Website Logo" src="https://s0.wp.com/wp-content/themes/vip/techcrunch-2013/assets/images/logo.svg" />
      </a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="index.html"> Home </a>
        </li>
        <li><a href="#"> Discover </a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"> Login </a>
        </li>
        <li><a href="#"> Sign up </a>
        </li>
      </ul>
    </div>
  </div>

</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

You can add this to remove the border from the collapse if you're using the mobile toggle:

.navbar.navbar-default .navbar-collapse {
  border: 1px solid transparent;
}

Working Example:

html,
body {
  background: red;
}
/*THE ABOVE BACKGROUND RULE IS FOR DEMO ONLY*/

.navbar.navbar-default {
  background: none;
  border: 1px solid transparent;
}
.navbar.navbar-default .navbar-collapse {
  border: 1px solid transparent;
}
.navbar.navbar-default .nav > li > a {
  color: white;
}
.navbar.navbar-default .navbar-brand {
  padding: 0px;
}
.navbar.navbar-default .navbar-brand img {
  height: 100%;
  padding: 15px;
  width: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">
        <img id="brand-image" alt="Website Logo" src="https://s0.wp.com/wp-content/themes/vip/techcrunch-2013/assets/images/logo.svg" />
      </a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="index.html"> Home </a>
        </li>
        <li><a href="#"> Discover </a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"> Login </a>
        </li>
        <li><a href="#"> Sign up </a>
        </li>
      </ul>
    </div>
  </div>

</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Comments