JSFiddle - React, Tailwind, and code Playground
HTML
<nav id="navigation">
<ul>
<li id="logo"><a href="http://alexandstein.com/">Alexworks</a>
</li>
<li><a href="http://alexandstein.com/main/about">About</a>
</li>
<li><a href="http://alexandstein.com/main/projects">Projects</a>
</li>
<li><a href="http://alexandstein.com/main/meta">Meta</a>
</li>
<li id="hamburger">
<img src="http://alexandstein.com/resources/images/icons/hamburger.png" alt="Menu" class="iconSmall" />
</li>
</ul>
</nav>
<p></p>
<nav id="navigation" class="fixed">
<ul>
<li id="logo"><a href="http://alexandstein.com/">Alexworks</a>
</li>
<li><a href="http://alexandstein.com/main/about">About</a>
</li>
<li><a href="http://alexandstein.com/main/projects">Projects</a>
</li>
<li><a href="http://alexandstein.com/main/meta">Meta</a>
</li>
<li id="hamburger">
<img src="http://alexandstein.com/resources/images/icons/hamburger.png" alt="Menu" class="iconSmall" />
</li>
</ul>
</nav>
<div style="width: 100%; background-color: blue"> hola </div>
CSS
body {
font-family: helvetica;
font-size: 1.1em;
margin: 0%;
padding-top: 0%;
}
#navigation {
list-style-type: none;
text-align: center;
width: 100%;
margin: 0%;
padding: 0%;
background-color: black;
height: 2em;
}
#navigation ul {
margin: 0%;
padding: 0%;
padding-top: 0%;
}
#navigation a {
color: #aaa;
}
#navigation a:visited {
color: #999;
}
#navigation a:hover {
color: #bbb;
}
#navigation li {
display: inline-block;
width: 15em;
height: 1.8em;
border-bottom-style: solid;
border-bottom-color: red;
}
#navigation li:hover {
background-color: #333;
}
#navigation .iconSmall {
width: 30px;
height:30px;
}
#navigation #logo {
display: inline-block;
text-align: left;
width: inherit;
float:left;
letter-spacing: 5px;
}
#navigation #links {
display: inline-block;
}
#navigation #hamburger {
width: 30px;
border-bottom-style: none
float: right;
}
a {
text-decoration: none;
}
#navigation.fixed #hamburger {
width: 30px;
border-bottom-style: none;
float: right;
}