BootStrap have mobile navbar entire bar dropdown

BootStrap have mobile navbar entire bar dropdown

My site is gitlit.org and when I go mobile or scale my browser the navbar
switches to the mobiel design without issues and I can click the three
white lines (menu) button and it works but clicking Home does nothing. Is
there a way so that the entire bar is clickable?
My navbar code:
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Home</a>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="about.html">About us</a></li>
<li><a href="#about">resources</a></li>
<li><a href="sermons.php">sermons</a></li>
<li><a href="#contact">contact us</a></li>
<li><a href="#contact">ministries</a></li>
<li><a href="#contact">blog</a></li>
</ul>
</div>
</div>
Here is my custom CSS that is applied to the NavBar, I did not edit the
main bootstrap css:
.navbar {
background-color: #000;
float: none;
}
.navbar-toggle {
border: 0px solid #000;
border-radius: 6px;
}
.navbar-nav > li > a {
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
}
.navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav >
.active > a:focus {
background-color: #000;
color: white;
}
.navbar-nav > .active > a:hover {
color: #fdbb20;
}
.navbar-nav > li > a:hover, .navbar-nav > li > a:focus {
color: #fdbb20;
}
.navbar-brand {
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
}
.navbar-brand:hover, .navbar-brand:focus {
color: #fdbb20;
}