Is there a way to prevent the text in my header from moving when I resize the browser? I want it to stay in place. Any help is greatly appreciated!
Check out the code on JSFiddle.
Here's how it looks Normal:
And here's how it looks Resized:
HTML:
<div id="NewNavBar"><ul class="nav">
<li><a href="me" style="margin-left:10px;"><b>Home</b></a></li>
<li><a href="community">Community</a></li>
<li><a href="staff">Staff</a></li>
<li><a href="shop">Shop</a></li>
</ul></div>
</div>
<div id="NewNavB"><ul class="navb">
<li><a href="#}><b>{username}</b></a></li>
<li><a href="#">My Page</a></li>
<li><a href="account">Account Settings</a></li>
</ul>
</div>
CSS:
#NewNavBar {
text-align: center;
position:relative;
width:100%;
min-height:40px;
border-top:2px solid #3f82a3;
border-bottom:2px solid #3977af;
background-color:#529ce2;
line-height: 40px;
}
li {
vertical-align: middle;
display: inline-block;
}
#NewNavBar li + li::before {
content: " | ";
}
#NewNavB li + li::before {
content: " | ";
}
li a{
padding:8px;
}
#NewNavBar ul a:hover{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #3f82a3;
padding: 7px;
text-decoration: none;
background-color: #4683bc;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav {
float: left;
color: white;
margin-left:202px;
}
.navb {
float: left;
color: #53729c;
margin-left:202px;
}
#NewNavB {
margin: 0 auto;
position:relative;
margin-bottom:15px;
width: 100%;
min-height: 30px;
border-bottom:2px solid #c1c1c1;
background-color:#f9f9f9;
line-height: 32px;
}