I've been experimenting with Bootstrap and want to create a small personal page with a navbar design like the one below:
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home">Jon Snow</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="page-scroll">
<a href="#about">About Me</a>
</li>
<li class="page-scroll">
<a href="#work">Work</a>
</li>
<li class="page-scroll">
<a href="#blog">Blog</a>
</li>
<li class="page-scroll">
<a href="#contact">Contact Me</a>
</ul>
</div>
</div>
</nav>
</body>
The styling for this navbar should be as follows:
body {
background-color:#2c3e50;
}
.navbar-fixed-top.navbar-shrink {
color:white;
padding: 10px 0;
background: rgba(0, 0, 0, .1);
}
However, I'm encountering an issue with a white line appearing in the navbar, visible in this image: https://i.sstatic.net/RQLST.png
How can I remove this white line and change the colors of the items in the Navbar to white?
Here is a JS Fiddle.