Working on my navbar for mobile view, I noticed some unwanted border lines above and below the form input field as shown in the image https://i.sstatic.net/HiOfz.png.
Question: How can I remove or disable those border lines above and below the form input in mobile view?
Here is an example on Codepen
body {
background: url('../images/bg.png');
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
hr {
border-top: 10px solid #444444;
position: fixed;
}
.navbar-left {
border-bottom: 0;
border-top: 0;
}
.navbar-form {
border-bottom: 0;
border-top: 0;
}
.page-wrapper {
margin-top: 40px;
}
@media (min-width: 768px) {
.custom-nav .navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
min-width: 150px;
}
}
.custom-nav {
margin-bottom: 0;
background: #333333;
border: none;
border-radius: 0;
}
...
Below is the HTML code:
<div class="container">
<nav class="navbar navbar-inverse custom-nav">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
</div>
...