Customized Bootstrap Navbar Responsive Problems

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>
                    <a href="#about"><img class="icon" src="home.png"></a>
                </li>
                <li>
                    <a href="#services"><img class="icon" src="services.png"></a>
                </li>
                 <li>
                    <a href="#portfolio"><img class="icon" src="portfolio.png"></a>
                </li>
                <li>
                    <a href="#contact"><img class="icon" src="contact.png"></a>
                </li>
               </ul>
            <ul class="nav navbar-nav social">
                <li>
                    <a href="#"><img class="iconSO" src="twitter.png"></a>
                </li>
                <li>
                    <a href="#"><img class="iconSO" src="linkedin.png"></a>
                </li>
                <li>
                    <a href="#"><img class="iconSO" src="blogspot.png"></a>
                </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>
                    <a href="#services"><img class="icon" src="services.png"></a>
                </li>
                 <li>
                    <a href="#portfolio"><img class="icon" src="portfolio.png"></a>
                </li>
                <li>
                    <a href="#contact"><img class="icon" src="contact.png"></a>
                </li>
               </ul>
            <ul class="nav navbar-nav social">
                <li>
                    <a href="#"><img class="iconSO" src="twitter.png"></a>
                </li>
                <li>
                    <a href="#"><img class="iconSO" src="linkedin.png"></a>
                </li>
                <li>
                    <a href="#"><img class="iconSO" src="blogspot.png"></a>
                </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

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!

Answer 2

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;
    }
}