I am in the process of creating a simple website, but I am encountering an issue with the menu bar shifting below the "Contact for Services" section when I view the page in different resolutions.
Is there a way to lock the position of the menu bar so that it stays in place when the browser width changes instead of dropping down?
My goal is to achieve a layout similar to this:
HTML
<body>
<!-- ############### -->
<!-- OVERALL WRAPPER -->
<!-- ############### -->
<div class="head_wrapper">
<!-- HeaderBarMain -->
<div class="header">
<h2>Contact for services questions on: ####</h2>
<!-- Contact Information -->
<!--<div class="contact">-->
<!-- </div><!-- END contact -->
<!-- Navigation menu -->
<div class="navMain">
<!-- Menu List -->
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- END navMain -->
</div><!-- END header -->
</div>
</body>
CSS
.head_wrapper {
width:100%;
}
.header {
background: #717171;
height: 60px;
width: 100%;
margin-top:0px;
}
.navMain {
float:right;
margin:15px 50px 28px 0px;
}
.navMain ul {
margin: 0px 0px 0px 10px;
padding: 0px;
}
.navMain ul li {
margin: 0px;
padding: 0px 20px;
list-style:none;
display:inline;
}
.navMain ul li a {
margin: 0px;
padding: 0px;
}
.navMain ul li a:hover {
}
.header h2 {
margin: 20px 30px 5px 440px;
font-size:12px;
float:left;
color:#FFFFFF;
}