I've been struggling with this problem all day.
I'm attempting to create a header that consists of a logo on the left and a list on the right.
I want it to resize along with the navigation below the logo.
I WAS ABLE TO ACHIEVE THIS but when I resize it back to a larger width, my nav remains below the logo.
Being new to web development, any tips or advice would be greatly welcomed.
<!DOCTYPE html>
<html>
<head>
<title> Website</title>
<!-- links -->
<link rel="stylesheet" href="style copy.css" type="text/css" />
</head>
<body class="body">
<!-- Main Menu -->
<div id="mainMenu" class="mainMenu">
<div class="logo"></div>
<nav class="rightThenMid">
<ul>
<li class="active first"><a href="#home">HOME</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>
CSS
body {
clear: both;
}
.body {
clear: both;
margin:0;
padding:0;
}
.mainMenu {
width: 100%;
height: 70px;
background-color: #121212;
z-index: 10;
}
.mainMenu nav {
height: 90px;
}
.mainMenu nav ul {
height: 100%;
}
.mainMenu nav ul li {
display: inline-block;
height: 100%;
font: 11px/6.36em "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: 0.25em;
list-style-type: none;
text-transform: uppercase;
}
.mainMenu nav ul li.first a {
padding-left: 0px;
}
.mainMenu nav ul li.last a {
padding-right: 0px;
}
.mainMenu nav a {
display: block;
padding-left: 18px;
padding-right: 18px;
text-decoration: none;
color: #fff;
}
.mainMenu nav ul li a:hover, .mainMenu nav ul li.active a {
color: #6159c1;
}
.rightThenMid {
float: right;
}
.logo {
display: inline-block;
width: 300px;
height: 70px;
background-image: url('img/companyLogo.png');
background-repeat: no-repeat;
margin: auto;
}
ul, li, nav, p {
margin:0;
padding:0;
border:0;
outline: none;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
nav ul,ul,ol {
list-style:none;
}
@media only screen and (min-width : 150px) and (max-width : 700px) {
.body {
clear: both;
margin: 0 auto;
}
.mainMenu {
height: 140px;
}
.mainMenu nav ul {
height: 100%;
display: inline-block;
list-style-type: none;
}
.rightThenMid {
display:block;
margin:0 auto;
text-align:center;
float: none;
}
.logo {
display: block;
margin:auto;
width: 300px;
height: 70px;
background-image: url('img/companyLogo.png');
background-repeat: no-repeat;
}
}