CSS Responsive menu with h1 title (logo) centered - html

Question

So I want to center a h1 without an image at the center of my navigation which has 2 more elements and it has to be responsive. I tried almost everything I can find but...works mostly with background images, and with inline-block I can't center it perfectly.
Below I have the best I could do, but hover doesn't work, probably cause of h1 width which 100%;
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
text-shadow: 1px 1px 1px black;
}
li {
list-style: none;
}
header {
margin: 0 auto;
text-align: center;
}
ul li {
float: left;
display: block;
background-color: #232323;
width: 50%;
padding: 10px 0 10px 0;
}
ul li:hover {
background-color: black;
}
.logo {
position: relative;
top: -38px;
}
<header>
<nav>
<ul>
<li><a href='#blog'>Blog</a>
</li>
<li><a href='#portofolio'>Portofolio</a>
</li>
</ul>
</nav>
<a href='#/' class='logo'><h1>Tao SandBox</h1></a>
</header>
It has to be a better way!!!
http://codepen.io/taosx/pen/vNWojo?editors=110

Answer 1

http://codepen.io/anon/pen/OyOKrN
Make the h1 use the .logo class. Then set absolute position and center it.
.logo {
position:absolute;
top:0;
left:0;
right:0;
text-align:center;
}
I'd also recommend adding the h1 markup prior to the nav, to maintain a better semantic flow.
<header>
<nav>
<h1 class='logo'><a href='#/' >Tao SandBox</a></h1>
<ul>
<li><a href='#blog'>Blog</a></li>
<li><a href='#portofolio'>Portofolio</a></li>
</ul>
</nav>
</header>

Answer 2

The simplest method is just to make the logo` part of the menu like so:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: white;
text-shadow: 1px 1px 1px black;
}
ul {
overflow: hidden;
}
li {
list-style: none;
}
header {
margin: 0 auto;
text-align: center;
background-color: #232323;
}
ul li {
float: left;
width: 33%;
vertical-align: middle;
}
ul li:hover {
background-color: black;
}
<header>
<nav>
<ul>
<li><a href='#blog'>Blog</a>
</li>
<li><a href='#/' class='logo'><h1>Tao SandBox</h1></a>
</li>
<li><a href='#portofolio'>Portofolio</a>
</li>
</ul>
</nav>
</header>