My website uses various bootstrap components and forms from various places so I had to write a common header.html file which gets loaded on to every page - while the pages are all different with their own CSS files, the header.html being loaded doesn't get linked to any CSS but instead has its own inline CSS written.
It seems to be working fine but looks real bad on mobiles. I am looking for help to review my code and suggest edits:
Here is how the header file looks:
https://www.easyaccom.com/header/header.html
Here is the code:
=======
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:#3498DB;top:0;left:0;z-index:1000000; height:47px; font-size:14px!important; font-family: "Open Sans", Helvetica, Arial, sans-serif;">
<div>
<a href="https://www.easyaccom.com" style="
padding-left: 100px;
"><img src="https://www.easyaccom.com/images/logo.png" border="0"></a>
<nav id="nav" role="navigation" class="mainheader listingupdatetop">
<a href="#nav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul class="clearfix listclear1 listupdate">
<li><a href="https://www.easyaccom.com/listing.php" class="listspace listspace1"><i class="fa fa-home"></i> List Your Space</a> </li><li><div class="btn-group listcurpos1" style="position:relative;float:left;margin-right:10px">
<select style="width: 80px;border: #090 1px solid;margin-top: 6px;" class="listcur listcurpad1" id="currencychanger">
<option style="margin:0px;padding:0px;width:100%;text-align:left" >INR</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >USD</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >EUR</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >GBP</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >AUD</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >CAD</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >HKD</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >JPY</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >MYR</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >NZD</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >SGD</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >THB</option>
</select>
</div></li>
[var.loggedin; if [val] == '1'; then '<li> <a href="" aria-haspopup="true"><span><img src=[var.userpic;htmlconv=no;noerr] class="userpicimg listingpic" style="width: 40px;border: #446db2 solid 1px;border-radius: 10%;"> [var.userdetails.user_firstname;noerr]</span></a> <ul class="listingtab"> <li><a href="http://www.easyaccom.com/dashboard/index.php">Dashboard</a></li> <li><a href="http://www.easyaccom.com/dashboard/profile.php">Profile</a></li> <li><a href="http://www.easyaccom.com/help.php">Help</a></li> <li><a href="http://www.easyaccom.com/logout.php">Logout</a></li></ul></li>'; else '<li> <a href="http://www.easyaccom.com/login.php">Log In</a> </li><li><a href="http://www.easyaccom.com/login.php">Sign Up</a></li>';noerr]
</ul>
</nav>
</div>
</div>
==================
Any help will be appreciated.
Thanks.