Rainier Laan Rainier Laan - 2 months ago 10
CSS Question

White line in bootstrap navbar

I made a navbar in bootstrap and it's responsive. But when i'm on mobile and i press the "Toggle" button there is a white line that i cant get rid of, Its between the top part and the menu (when u toggle it). I just started bootstrap.



body {
margin: 0;
padding: 0;
}

@font-face {
font-family: "Nexa Light";
src: url('../font/Nexa%20Light.otf');
}

.navbar-default {
background-color: black;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
font-size: 17px;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #FFF;
}

.navbar-default .navbar-nav > li > a {
color: #FFF;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: rgb(44, 44, 45);
color: #dedede;

}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #FFF;
background-color: rgb(44, 44, 45);
}

.navbar-default .navbar-text {
color: #FFF;
}

.navbar-default .navbar-toggle {
border-color: rgb(44, 44, 45);

}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: rgb(44, 44, 45);
}

.navbar-default .navbar-toggle .icon-bar {
background-color: #FFF;
}

.col-md-12 {
height: 500px;
padding: 20px;
}

<link rel="shortcut icon" href="img/favicon2.ico" type="image/x-icon">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>

<!-- NAVIGATIE BALK -->
<nav class="navbar navbar-default" role="navigation">
<!-- logo -->
<div class="navbar-header">
<!-- -->
<a class="navbar-brand" href="#">
<img src="img/LOGO2.png" alt="Brand" style="height: 100%" />
</a>

<!-- Inklappbaar ding als je op mobiel zit-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainnavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>

<!-- menu eitems linker kant-->
<div class="collapse navbar-collapse" id="mainnavbar">
<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>
<li><a href="#">Over mij</a></li>
<li><a href="#">Contact</a></li>

<!-- Dropdown -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Profiel <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Profiel</a></li>
<li><a href="#">Instellingen</a></li>
<li><a href="#">Log uit</a></li>
</ul>
</li>
</ul>

<!-- Aan de rechterkant -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Uitloggen</a></li>
</ul>

</nav>

<!-- EINDE NAVIAGTIE BALK-->



<div class="container-fluid">

<div class="row">
<div class="col-xs-12 col-md-12" style="background: lightblue;">Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width
Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width
Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width
Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width
Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width
Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width
</div>
<div class="col-xs-12 col-md-12" style="background: lightcoral;">Phone entire width, Desktop 1/2 width</div>
<div class="col-xs-12 col-md-12" style="background: lightgreen;">Phone entire width, Desktop 1/2 width</div>
</div>

</div>




Answer

Try to use this code. It will remove the unwanted line

.navbar.navbar-default .navbar-collapse {border: none; box-shadow: none;}