Header menu layout alteration

I designed a webpage for a client that had the company logo on the left of the and the the menu to the right of it, taking up the remainder of the websites width and changing accordingly on browser re-size.

Since then I have purchased your enfold theme and have not been able to achieve the same results.

Here was my header HTML:

<div class="header">
				<div>
					<a href="index.html"><img src="media/cp.png" /></img></a>
				</div>
				<div class="nav">			
					<ul>
						<li class="ProgramLink" id="MainLinks"><a href="#">PROGRAMS</a></li>
						<li class="MediaLink" id="MainLinks"><a href="#">MEDIA</a></li>
						<li class="AboutLink" id="MainLinks"><a href="#">ABOUT US</a></li>
						<li class="ContactLink" id="MainLinks"><a href="#">CONTACT</a></li>
					</ul>
					<hr>
				</div>
			<div id="slogan">					
			</div>
</div>

And the CSS:

.header{
    float: left;
    width: 100%;
    z-index: 10;
    position: fixed;
    top: 0;
}
#MainLinks{
	height: 115px;
}
#slogan{
	position: absolute;
	left: 415px;
	top: 140px;

	font-size: calc(60vw / 40);
	font-style: bold;
}
.nav {
    width: calc(100% - 398px);
	position: relative;
	bottom: 187px;
	left: 400px;
}
.nav ul {
	width: 100%;
	height: 100px;
	list-style: none;
	margin: 0;
    padding: 0;
}
.nav ul li {
    float: left;
	width: 25%;
	display: block;
	line-height: 110px;
}
.nav ul li a {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
 color: #FFF;
 font-size: calc(80vw / 40);
font-weight: normal;
}

Any Assistance would be very appreciated.

• This topic was modified 8 years, 8 months ago by atdm86.