Recently I’ve a designed a homepage for website project and I created the menu navigation with centered logo in between the menu links without knowing that it will be such a challenge to write the CSS that will work with WordPress later.

I browsed some articles and there was a StackOverflow thread discussion that might be a solution for this particular menu and logo layout.

Going to give a shot to center the logo in an inline menu list as seen on restauracemichalov.cz ~ wonder if it’ll work in WordPress too! #CSS

— Audee Mirza (@audeemirza) December 7, 2012

On my first try I kept trying to include the logo as part of the menu list but later I found out that it was hard to lined up the position of the logo image and the menu list like what they should appear.

As for the solution, I can finally exclude the logo div from the menu list, but I can still position the logo part to the center with ‘auto’ left and right margin property and of course, I’m doing the same thing with the ul menu with a little adjustment of right/left padding.

The HTML:
{code type=codetype}

{/code}

The CSS:
{code type=codetype}
#navbar {
background-image: url(images/nav-bg.png);
background-repeat: repeat-x;
margin:-70px 0 50px 0;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
}

#navbar ul {
width: 1085px;
margin: 0 auto!important;
text-align:left;
padding:15px 0 0 25px;
text-align:center;
}

#navbar li {
display:inline;
margin: 0 20px;
padding: 0;
font-size:1.15em;
text-align:center;
overflow:hidden;
}

#navbar .hspace {
margin-left: 540px;
}

#navbar li a {
color:#ffffff;
text-shadow: rgba(0,0,0,.5) 0 0 0.5px;
}

#navbar li a:hover{
color: #f4f4f4;
text-decoration:none;
}

#navbar .current_page_item a, #navbar .current-cat a{
color: #F000A7;
text-decoration:none;
}

#logo h1 a {
display:block;
background:url(images/logo.png) no-repeat left top;
width:498px;
height:171px !important;
text-indent:-99999px;
margin:25px auto 0 !important;
position:relative;
z-index:99;
}
{/code}

You can see that the third menu link is using .hspace class with certain margin-left value so it can give space for the logo. That’s something that I wished I knew earlier 😀
I am sure that this kind of menu will also work in WordPress menu feature.

Live Demo