john murphy john murphy - 3 months ago 10
CSS Question

links on navigation bar have 100% height as logo

I'm trying to put a logo on the same line as the navigation bar with the links floated to the right. I put the image and the

ul
in the same div but how can I have the links stretch the same height as the image? For example, on hover on the links should be highlighted the entire height from the top of the screen to the bottom of the bar/logo. Right now it only highlights the link.

HTML

<section id="header">
<div id="nav">
<img src="images/logo.png" alt="logo" style="width:15%;height:15%">
<ul id="menu">
<li><a class="link" href="#home">Home</a></li>
<li><a class="link" href="#about">What we do</a></li>
<li><a class="link" href="projects.html">Projects</a></li>
<li><a class="link" href="#careers">Careers</a></li>
<li><a class="link" href="#contact">Contact</a></li>
</ul>
<!-- so float right won't fuck my shit up -->
<br style="clear:both;" />
</div>
</section>


CSS

.logo {
display: inline-block;
float: left;
vertical-align: middle;
}

#menu {
float: right;
display: inline-block;
padding: 0;
margin: 0;
vertical-align: top;
}

#menu li {
display: inline;
vertical-align: center;
float: left;
padding: 0;
margin: 0 5px 0 5px;
}

#menu li a {
text-transform: uppercase;
font-weight: bold;
font-family: 'Open Sans';
color: #696969;
display: block;
text-align: center;
padding: 10px 10px;
text-decoration: none;
-webkit-transition:color 0.5s ease-in;
position: relative;
}

#menu li a:hover {
color: #004080;
background-color: #f2f2f2;
}


Here's my jsfiddle https://jsfiddle.net/f86u3edt/

For an idea, I'm going for something like this http://michaelaldridge.com/

Answer

Hope flex will help you. Here is the updated Demo

.logo {
	display: inline-block;
	float: left;
	vertical-align: middle;
}

#menu {
  float: right;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 0;
  margin: 0;
  vertical-align: top;
}

#menu li {
	display: flex;
	height: 100%;
	align-items: center;
	vertical-align: center;
	float: left;
	padding: 0;
	margin: 0 5px 0 5px;
}

#menu li a {
	text-transform: uppercase;
	font-weight: bold;
	font-family: 'Open Sans';
	color: #696969;
	display: block;
	text-align: center;
	padding: 10px 10px;
	text-decoration: none;
	-webkit-transition:color 0.5s ease-in;
	position: relative;
}

#menu li:hover {
	color: #004080;
	background-color: #aaa;
}

#nav{
	display: flex;
}
<section id="header">
			<div id="nav">	
				<img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" alt="logo" style="width:15%;height:15%">		
				<ul id="menu">
					<li><a class="link" href="#home">Home</a></li>
					<li><a class="link" href="#about">What we do</a></li>
					<li><a class="link" href="projects.html">Projects</a></li>
					<li><a class="link" href="#careers">Careers</a></li>
					<li><a class="link" href="#contact">Contact</a></li>
				</ul>
				<!-- so float right won't fuck my shit up -->
				<br style="clear:both;" />
			</div>
		</section>