CODEWITHSUNDEEP
csswordpresswordpress-theming
NewUser
NewUser

Reputation: 13323

Different images for different menus in wordpress

In my WordPress menu I want different images for different menus with text as well. Here is the image reference. I want my menu should be like this.I am using WordPress 3.4.2. Any help and suggestions are highly appreciable.

enter image description here

Update The screen options imageenter image description here

Upvotes: 0

Views: 270

Answers (2)

Lazar Vuckovic
Lazar Vuckovic

Reputation: 808

Here are two ways on how you could add custom classes to your menu items, so that you could style them with CSS.

  1. When on the Appearance > Menus page in Wordpress admin panel, click on Screen Options at the top-right of the page. A slide-out menu appears and allows you to check an option labeled CSS Classes. If you enable this option, you will be able to add a custom class to each menu item, the same way as you add its title.

  2. You can customize the Walker class to add an incremental class name to each (top-level) element. To see how the Walker class works, please take a look at the following article: http://wp.tutsplus.com/tutorials/creative-coding/understanding-the-walker-class/

Upvotes: 3

Caelea
Caelea

Reputation: 2348

  1. Use image sprites
  2. Use a different class for each of your <li> item
  3. Position your images as background for that classes.

Upvotes: 0

Related Questions