issue styling bootstrap navbar when collapse - css

Question

I am using the below css in my code to achieve a transparent white navbar but after collapsing menu in mobile version background style doesn't work. please help me to overcome this issue. i tried most of the solutions found in other questions
#header_wrapper {
background: rgba(255, 255, 255, 0.82);
}
.header_box {
position: relative;
}
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 15px 0px 10px 0px;
z-index: 10000;
transition: all 0.2s ease-in;
height: 100px;
background-color:transparent;
text-align: center;
line-height: 40px;
}
.header.active {
background: rgba(255, 255, 255, 0.82);
}
.logo {
float: left;
position: relative;
z-index: 2;
}
.res-nav_click {
display: none;
}
/* Nav Styles
---------------------------------*/
.navbar-inverse {
background-color: transparent;
border-color: transparent;
}
.navbar {
border: 0px solid #fff;
min-height: 40px;
margin-bottom: 0px;
}
.navbar-inverse .navbar-nav > li > a {
color: #000;
}
.navStyle {
float: right;
}
.navStyle ul {
list-style: none;
padding: 0px;
margin-top:25px;
}
.navStyle ul li {
display: inline-block;
margin: 0 5px;
}
.navStyle ul li:first-child {
/*margin:0px;*/;
}
.navStyle ul li:last-child {
margin: 0 0 0 23px;
}
.navStyle ul li a {
display: block;
font-size: 15px;
color: #222222;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-decoration: none;
text-transform: uppercase;
font-weight: 300;
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
}
.navStyle ul li a:hover {
color: #ffc000;
border: 0px solid #fff;
}
.navStyle > li > a:hover, .nav > li > a:focus {
text-decoration: none;
color: #ffc000;
background-color: transparent;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
color: #ffc000;
background-color: transparent;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
color: #ffc000;
background-color: transparent;
}
.navStyle > li.active > a,
.navStyle > li.active > a:hover {
text-decoration: none;
color: #ED5441;
background-color: transparent;
}
HTML:
<header id="header_wrapper" class="header active border">
<div class="container">
<div class="header_box">
<div class="logo"><img src="images/logo.png" alt="logo"></div>
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div id="main-nav" class="collapse navbar-collapse navStyle">
<ul class="nav navbar-nav" id="mainNav">
<li class="active">Home
Home
</li>
<li>About Us
About Us
</li>
<li>Products
Products
</li>
<li>Services
Services
</li>
<li>Group
Group
</li>
<li>Careers
Career
</li>
<li>Contact Us
Contact Us
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
http://globaltrendz.com/blackandgreen/ please refer this one by changing header-wrapper bgcolor opactiy. like this one what i need

Answer 1

I am assuming that you want mobile navbar after 765px so you need to use a media query on that.
Add this at the end of your css file:
#media screen and (max-width: 765px){
.navStyle ul{
position: fixed;
left: 0;
background: rgba(255, 255, 255, 0.82) !important; //important //because you have inline styles.
}
}
Here's the output:

Answer 2

got the solution by applying below styles
.navbar-inverse {
background-color: rgba(222,222,222,0.84);
border-color: transparent;
width:100%;
position:fixed;
left:0;
}
.navStyle ul {
background-color: rgba(222,222,222,0.84);
}