Standalone Bootstrap header not responsive - html

Question

Since my site has multiple pages which are being designed by multiple people, we decided to create a standalone header. This is the code. While it was working initially, now after some tweaks, it's suddenly no longer responsive. As we use different CSS files, the CSS for this had to written inline, to avoid a clash with the others.
Here is the code, your help in helping me figure out the issue is much appreciated!
Header code (HMTL + Inline CSS):
---------------
<style>
body
{
background-color: #fff;
}
#nav
{
font-family: 'Open Sans', sans-serif;
font-weight: 400;
position: fixed;
top: 0;
right: 1%;
z-index: 1030;
}
#nav > a
{
display: none;
}
#li-bg
{
border: 1px solid #fafafa;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
#nav li
{
position: relative;
list-style:none;
-webkit-border-radius: 6px;
border-color: #333 1px solid;
-moz-border-radius: 6px;
border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
background-color: transparent;
}
#nav li a
{
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #fff;
white-space: nowrap;
background-color: #fcfcfc;
}
#nav li a:active
{
background-color: #3498db!important;
}
#nav span:after
{
width: 0;
height: 0;
border: 0.313em solid transparent; /* 5 */
border-bottom: none;
border-top-color: #fff;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em; /* 5 */
}
/* first level */
#nav > ul
{
height: 2.75em; /* 60 */
}
#nav > ul > li
{
height: 100%;
float: right;
width: 130px;
background-color: #3498db;
}
#nav > ul > li > a
{
height: 100%;
font-size: .95em; /* 24 */
line-height: 2.5em; /* 60 (24) */
text-decoration:none;
text-align: center;
background-color:transparent;
}
#nav > ul > li:not( :last-child ) > a
{
border-right: 1px solid transparent;
}
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a
{
}
/* second level */
#nav li ul
{
display: none;
position: absolute;
top: 100%;
padding-top: 8px;
padding-left:40px;
}
#nav li:hover ul
{
display: block;
left: 0;
right: 0;
}
#nav li:not( :first-child ):hover ul
{
left: -1px;
}
#nav li ul a
{
font-size: 1.25em; /* 20 */
border-top: 1px solid #fcfcfc;
background-color:#3498db;
color: #fff;
font-size:.85em;
width:100px;
text-decoration: none;
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
background-color: #2c81ba;
}
#media only screen and ( max-width: 62.5em ) /* 1000 */
{
#nav
{
width: 100%;
position: static;
margin: 0;
}
}
#media only screen and ( max-width: 40em ) /* 640 */
{
html
{
font-size: 75%; /* 12 */
}
#nav
{
position: relative;
top: auto;
left: auto;
}
#nav > a
{
width: 3.125em; /* 50 */
height: 3.125em; /* 50 */
text-align: left;
text-indent: -9999px;
background-color: #3498db;
position: relative;
}
#nav > a:before,
#nav > a:after
{
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#nav > a:after
{
top: 60%;
}
#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type
{
display: block;
}
/* first level */
#nav > ul
{
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul
{
display: block;
}
#nav > ul > li
{
width: 100%;
float: none;
}
#nav > ul > li > a
{
height: auto;
text-align: left;
padding: 0 0.833em; /* 20 (24) */
}
#nav > ul > li:not( :last-child ) > a
{
border-right: none;
border-bottom: 1px solid #2c81ba;
font-size: 1em;
}
/* second level */
#nav li ul
{
position: static;
padding: 1.25em; /* 20 */
padding-top: 0;
}
}
</style>
<div style="width:100%; position:fixed;background-color:#f8f8f8;top:0;left:0;z-index:1000000; height:47px; font-size:14px!important; font-family: "Open Sans", Helvetica, Arial, sans-serif;">
<div>
<a href="http://www.example.com" style="
padding-left: 100px;
"><img src="http://www.example.com/images/logo.png" border="0"></a>
<nav id="nav" role="navigation" class="mainheader">
<ul class="clearfix">
<li><i class="fa fa-home"></i> Connect </li>
[var.loggedin; if [val] == '1'; then '<li> <span><img src=[var.userpic;htmlconv=no;noerr] class=userpicimg style="width: 40px;border: #446db2 solid 1px;border-radius: 10%;"> [var.userdetails.user_firstname;noerr]</span> <ul> <li>Dashboard</li> <li>Profile</li> <li>Help</li> <li>Logout</li></ul></li>'; else '<li> Log In </li><li>Sign Up</li>';noerr]
</ul>
</nav>
</div>
</div>

Answer 1

Did you add viewport meta tag to your HTML? if not try adding this
<meta name="viewport" content="width=device-width, initial-scale=1">
If it didn't work try adding this to your css as well.
#-ms-viewport{
width: device-width;
}
Hope this Helps :)