Centered Logo in a Menu List

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.

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

If you like my posts or would like to follow recent updates of my work, just subscribe to receive newsletter 😊

1 thought on “Centered Logo in a Menu List”

  1. Pingback: Tweet Parade (no.50 Dec 2012) | gonzoblog

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

error: Content is protected !!