Customized Bootstrap Navbar Responsive Problems - html

Question

I have created a vertical navbar that has issues with the toggle feature when becoming a horizontal bar on a mobile device. I've tried to get around it several times, and I've ended up creating a separate style sheet for the mobile version. However, now it interferes with desktop version, and if I try to hide the mobile version, the toggle feature stops working.
I'm sure there must be an easier way to do this, but I haven't found anything that's worked.
HTML
Toggle navigation
KEDEV
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse-ex1-collapse" id="navbar-collapse-ex1-collapse">
<ul class="nav navbar-nav-mobile">
<li>
<img class="icon" src="home.png">
</li>
<li>
<img class="icon" src="services.png">
</li>
<li>
<img class="icon" src="portfolio.png">
</li>
<li>
<img class="icon" src="contact.png">
</li>
</ul>
<ul class="nav navbar-nav social">
<li>
<img class="iconSO" src="twitter.png">
</li>
<li>
<img class="iconSO" src="linkedin.png">
</li>
<li>
<img class="iconSO" src="blogspot.png">
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- End Mobile Nav -->
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-right" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<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="#about">KEDEV</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a mouseover="buttonPress('1') class="menu-button" id="aboutButton" data-toggle="tooltip" data-placement="right" title="About" href="#about"><img class="icon" src="home.png"></a>
</li>
<li>
<img class="icon" src="services.png">
</li>
<li>
<img class="icon" src="portfolio.png">
</li>
<li>
<img class="icon" src="contact.png">
</li>
</ul>
<ul class="nav navbar-nav social">
<li>
<img class="iconSO" src="twitter.png">
</li>
<li>
<img class="iconSO" src="linkedin.png">
</li>
<li>
<img class="iconSO" src="blogspot.png">
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
CSS
/* MobileNav*/
.navbar-mobile {
display:none;
}
.mnavbar-header{
display:none;
}
.navbar-fixed-top{
display:none!important;
}
/*Navigation*/
.container {
width:100%;
margin:0 auto;
padding:0;
border-sizing:border-box;
}
.navbar {
margin-bottom:0;
z-index:31;
position:fixed;
float:none;
display:block;
}
.navbar-collapse {
height: 100%;
border-top: 0;
box-shadow: none;
max-height: none;
padding-left:0;
padding-right:0;
float:none;
display:block;
}
.navbar-collapse.collapse {
display: block !important;
width:100%;
overflow: visible !important;
margin-bottom:0px;
}
.navbar-collapse.in {
overflow-x: visible;
}
.navbar-nav,
.navbar-nav > li,
.navbar-left,
.navbar-right,
.navbar-header
{float:none !important;
left:0;right:auto;}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: 0;
}
.navbar-brand {
color:white;
margin-bottom: 6em;
font-size:2em;
}
.navbar li {
margin: 0.5em 0.5em 0.5em 0.5em ;
position:relative;
}
.icon {
width:2em;
height:2em;
}
.social {
margin-top:20em;
}
.social li {
display:inline-block;
margin: -1em -1.3em -2em -1.1em ;
}
.iconSO {
width:2.3em;
height:2.3em;
}
/* Media Query */
#media (max-width: 767px) {
.navbar {
display:none;
}
.navbar-mobile {
display:block !important;
height:auto;
width:auto;
}
.mnavbar-header{
display:block!important;
overflow:visible;
}
.navbar-fixed-top {
display:block !important;
overflow:visible;
}
.navbar-collapse-ex1-collapse {
background-color: rgba(0, 0, 0, 0.6) !important;
float: left;
margin-top: 0;
margin-bottom: 0;
}
#navbar-collapse-ex1-collapse {
position:fixed;
left:0;
width:100%;
height:100%;
overflow:visible;
display:block ;
}
.nav-collapse.collapse-ex1-collapse {
display: block !important;
height: auto !important;
overflow: hidden !important;
}
.navbar-brand {
margin-bottom:0;
display:block;
}
.navbar li {
font-size:2em;
text-align:center;
display:inline;
}
body {
padding-left: 0;
padding-right: 0;
}
}

Answer 1

Here, This should do the trick.
#media (max-width: 1992px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}

Answer 2

Thank you for your suggestions. I have worked with it a few more hours and found an answer.
I deleted quite a bit of my media query CSS and added an overflow:hidden to my .navbar-mobile.
#media (max-width: 767px) {
.navbar-mobile {
display:block !important;
height:auto;
width:auto;
background-color: rgba(0, 0, 0, 0.6) !important;
overflow:hidden;
}
.mnavbar-header{
display:block!important;
}
.navbar-collapse-ex1-collapse {
float: left;
margin-top: 0;
margin-bottom: 0;
}
#navbar-collapse-ex1-collapse {
left:0;
width:100%;
height:100%;
display:block ;
}
.nav-collapse.collapse-ex1-collapse {
display: block !important;
height: auto !important;
}
.collapse.navbar-collapse-ex1-collapse {
background-color: rgba(0, 0, 0, 0,1) !important;
}
.navbar-brand {
margin-bottom:0;
display:block;
}
.navbar li {
font-size:2em;
text-align:center;
display:inline;
}
.navbar-collapse-ex1-collapse {
display:block;
}
}
I'm still working on tweaking the transparency and background, but now the toggle works!