Centered Logo in a Menu List

Dec 8th, 2012

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:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="header">
<div id="logo">
<h1><a title="Logo">Dragon Fit</a></h1>
</div>
<div id="navbar">
<ul>
	<li class="current"><a>Bryllupet</a></li>
	<li><a>Dragonfit</a></li>
	<li class="hspace"><a>Anbefalt</a></li>
	<li><a>Treningsløftet</a></li>
</ul>
</div>
</div>

The CSS:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

#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;
}

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 :D
I am sure that this kind of menu will also work in WordPress menu feature.

Live Demo

CSS
Free WordPress Themes
WordPress Theme PandaThemes