Navigation menu toggle dropdown not rendering properly - html

Question

I am having difficulty in rendering the dropdown menu properly on my website www.bg-hairsalon.com It is a wordpress website that utilizes the theme Zerif-Lite. It doesn't show the options when I click on the navigation button. However, if I scroll down and then click on the navigation toggle button it displays the menu. I am using android and iphone both to test my website. If you could take a look that would be great. I was using android to test this menu. This doesn't work on iphone as well.
The code I am using for the navigation menu so far is as follows:
Not sure how much of this code do I need.
#media screen and (max-width: 480px){
.navbar {
background: #FFF;
border: 0;
border-radius: 0 !important;
text-align: left;
-webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
}
}
#media screen and (max-width: 480px){
#main-nav {
position: fixed;
width: 100%;
z-index: 1000;
min-height: 75px;
}
}
#media screen and (max-width: 480px){
#main-nav.fixed {
position: fixed;
top: 0;
}
}
.nav li a.nav-active {
color: #b8db4d !important;
}
.nav li a.nav-active:before {
position: absolute;
margin: auto;
z-index: 1;
content: "";
width: 75%;
height: 2px;
background: #b8db4d;
bottom: 0px;
left: 12.5%;
}
.navbar-inverse .navbar-nav >li {
display: inline;
margin-right: 20px;
margin-top: 20px;
}
.navbar-inverse .navbar-nav>li:last-child {
margin-right: 0 !important;
}
.navbar-inverse .navbar-nav>li>a {
color: #404040;
padding: 0;
line-height: 35px;
}
.navbar-inverse .main-navigation ul > li {
display: inline;
margin-right: 20px;
margin-top: 20px;
}
.navbar-inverse .main-navigation > ul > li:last-child {
margin-right: 0 !important;
}
.navbar-inverse .main-navigation > ul > li > a {
color: #404040;
padding: 0;
line-height: 35px;
}
.navbar-inverse .navbar-nav ul.sub-menu {
display: none;
position: absolute; top: 100%;
background:#fff;
width:200px;
box-shadow: 3px 3px 2px rgba(50, 50, 50, 0.08);
}
.navbar-inverse .navbar-nav ul.sub-menu {
margin:0;
}
.navbar-inverse .navbar-nav ul.sub-menu ul.sub-menu{
position: absolute;
left:100%;
top:0;
}
.navbar-inverse .navbar-nav ul.sub-menu li {
float: none;
position: relative;
list-style:none;
padding:10px;
}
.navbar-inverse .navbar-nav ul.sub-menu li a {
color:#404040;
}
.navbar-inverse .navbar-nav ul.sub-menu li:hover > a {
color:#b8db4d;
}
.navbar-inverse .navbar-nav li:hover > ul.sub-menu {
display: block;
}
.navbar-brand {
height: 76px;
position: relative;
line-height: 45px;
}
.current a {
color: #b8db4d !important;
position: relative;
outline: none;
}
.current:before {
position: absolute;
margin: auto;
z-index: 1;
content: "";
width: 75%;
height: 2px;
background: #b8db4d;
bottom: 0px;
left: 12.5%;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: #b8db4d;
outline: none;
}
#media screen and (max-width: 480px){
.navbar-toggle {
border: 0;
background-color: #808080;
margin-top: 23px;
}
}
.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus {
background-color: #b8db4d;
filter: alpha(opacity=100);
opacity: 1;
box-shadow: none;
}
#media screen and (max-width: 480px){
.navbar-toggle.active{
background-color: #b8db4d !important;
}
}
#media screen and (max-width: 480px){
.navbar-toggle.collapsed{
background-color: #808080 !important;
}
}