How to Style the WordPress Menu

This tuto­r­ial is based on a recent Cus­tom Photo Blog Theme Devel­op­ment for Word­Press on the base of Semi­oman­tics XO. The Solu­tions apply to most any clean Word­Press theme whereas some of the style sheet syn­tax may vary from theme to theme.

The Goal of the exer­cise was to build a site which will dis­play on mobile plat­forms as well with­out the use of WPTouch Pro for exam­ple and which offers the pos­si­bil­ity to nav­i­gate with­out zoom­ing on mobile phones.

This gave us the oppor­tu­nity to style the Main Nav­i­ga­tion (hor­i­zon­tal menu on top of the site. As we are on a photo site we thought about using Menu tabs with images and rollover effects which can be achieved either with sprites or as indi­vid­ual images.

We opted for a solu­tion with­out sprites in this case con­sid­er­ing that the dif­fer­ence will not be mate­r­ial on this site.

The screen­shot shows the rollover effect as it has been taken while the mouse was hov­er­ing over the CONTACT tab.

The Menu Nor­mal View and the Hover View show the same pic­ture, whereas we put a trans­par­ent black layer (85% alpha) over the image for the Nor­mal View. Also the font changes from white to blue.

On other sites we used black and white images which evolve to color or sim­ply two entirely dif­fer­ent pic­tures or text labels.

The ques­tion we will answer here is:

First of all we cre­ate a menu from the Word­Press dash­board under Appear­ance –>Menu.

We call this main nav­i­ga­tion ‘Main’. Now, and this is impor­tant, open the Screen Options on top right of the screen and tick all options, namely the Advanced Menu Prop­er­ties.

Click to see large version.

These allow you to con­fig­ure your menu items fur­ther, for exam­ple you may open the link in a new tab or win­dow, you may define the link rela­tion, add a descrip­tion and impor­tant for us: you may define CSS Classes!

These classes allow us to style each list item in the menu indi­vid­u­ally by defin­ing the cor­re­spond­ing styles in the cus­tom syle sheet.

As you can see from the above screen-shot, we cre­ated a menu tab for FREE B&W PHOTO FEEDS. We expand the tab in the back-office to see all prop­er­ties and we cre­ate a CSS Class which we call “navfeed” (You just type in the name of the class, not the “.” (dot) which you will use in the CSS Style-sheet only.).

Repeat this pro­ce­dure for  all menu items cre­at­ing for each a CSS class (or multiples).

If all tabs will be styled in a uni­form way, you may use the same class for all; it is how­ever likely that you wish to cre­ate indi­vid­ual styles, namely if you use dif­fer­ent images and width of the tabs.

Now we just style the menu from the XO design tab as much as pos­si­ble: fonts, font color and size and hov­ers if you wish. Our exam­ple shows that we have spread the menu over the full width of the page sim­ply by adapt­ing the fonts and font sizes, right from the XO Design panel.

Once done, take a screen­shot of the menu and load it to Pho­to­shop or any other image edi­tor where you dis­pose of rulers to mea­sure the width of each tab.

In our exam­ple, we are using 4 tabs with dif­fer­ent width, the page width being 980 pixels.

The tabs have the fol­low­ing width:

1. navhome:       157 px
2. navfeed:          459 px
3. nav­con­tact:    280 px
4. navy:                 84 px

Total, 980 pixels.

We wish to sep­a­rate the tabs leav­ing a space of 1 pixel between them; we there­fore decrease the with of 3 tabs by 1 px each to cre­ate the space for the spaces (this is get­ting smart, huh).

If you use Pho­to­shop, you can just design your menu bar and slice it then accord­ingly, If you go one by one, you just cre­ate indi­vid­ual pic­tures of the same height and the width as defined above.

As we like to use the menu lay­out from XO, we will use the font def­i­n­i­tion from XO; the images we cre­ate will serve just as back­ground pic­tures for each menu tab.

Our XO Set­tings for the menu are:

• Font: Quick­sand
• Font size: 32 px
• Font Color: #FFFFFF (white)
• Hover Color:  #0000FF (blue)
• Back­ground: #000000 (black)

These set­tings result in a nice menu which we will expand with an image. The height of the menu is 80 px at present and we wish to expand it to 182 px by adding an image.

There you go! Now let’s fit every­thing together!

Finally we open our CSS Style-sheet and define the newly cre­ated classes.

As you see above, our classes are:

navhome, navfeed, nav­con­tact and navy.

The cor­re­spond­ing classes in the Style-sheet will be:

.navhome

.nav­con­tact .….   a dot in front of the label defines a “class” in the CSS Style-sheet.

Also, as these tabs con­tain hyper­links, we will cre­ate the classes

.navhome a

.nav­con­tact a .…  and so on.

This way we will then be able to cre­ate the hover pseudo classes:

.navhome a:hover .… and so on.

Now we just type into our style-sheet what­ever result we want to achieve, in our case this looks as fol­lows for the HOME tab (the oth­ers are sim­i­lar, except the width and image reference).

.navhome, .navhome a {background: url('http://bw.photorss.com/wp-content/uploads/2011/07/navhome-o.png') no-repeat !important;height:130px !important;}
.navhome a:hover {background: url('http://bw.photorss.com/wp-content/uploads/2011/07/navhome.png') no-repeat !important;}

.navfeed, .navfeed a {background: url('http://bw.photorss.com/wp-content/uploads/2011/07/navfeed-o.png') no-repeat !important;height:130px !important;}
.navfeed a:hover {background: url('http://bw.photorss.com/wp-content/uploads/2011/07/navfeed.png') no-repeat !important;}

To this we add the lit­tle 1 px space:

.navfeed  {margin-left:1px ;}

That’s it!

Hope you enjoy and let me know about your results by com­ment­ing here below.

• word­press menu style
• how to style word­press menu
• style word­press menu
• how to make money
• word­press menu styles
• How to style Word­Press Menus
• word­press menu pic
• word­press photo menu
• HOWO TO ADD MENU WITH WORDPRESS AND STYLES
• word­press advanced menu properties

Related posts:

1. Word­Press 3 Menu Problems
2. Sim­ple Sprites Menu
3. How to Cus­tomize Word­Press 2
4. Word­Press Sem­i­nar by Ycademy
5. How to add the Date to the WP Navigation

Tags: Best WordPress Photo Theme, Custom Menu, Menu with Images, Rollover Effects, WordPress Tutorial

This entry was posted on July 28, 2011 at 12:31 am and is filed under Tutorials, Web Design, WordPress. You can follow any responses to this entry through the RSS 2.0 feed.