Title: Image in menu
Last modified: August 20, 2016

---

# Image in menu

 *  Resolved [Kabyy](https://wordpress.org/support/users/kabyy/)
 * (@kabyy)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/image-in-menu/)
 * Hi,
 * I would like to add images for each part in my menu.
 * I added <img> brackets in my custom menu like that:
    `<img src="http://www.mywebsite.
   com/wp-content/themes/twentyten_child/images/button_offer.png" style="width: 
   125px; height: 125px; padding: 0; margin: 0;">Our Offer`
 * but then I don’t see anything on my website.
 * I have a child theme and my <nav> is not into my header anymore. Actually it 
   is in my home page template:
 *     ```
       <?php
       /*
       Template Name: home
       */
       ?>
   
       <?PHP get_header('home'); ?>
   
       <?PHP get_template_part( 'loop', 'index' ); ?>
   
       <nav id="access_home" role="navigation">
       			  <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
       				<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
       				<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
       				<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
       			</nav><!-- #access -->
   
       <?PHP get_footer('home'); ?>
       ```
   
 * Can it create problems ?
 * Any idea how I could solve it ?
 * Many thanks,
 * Xavier

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/image-in-menu/#post-2890408)
 * You need to do this using pure CSS in your child theme. If you examine the menu’s
   output, you will see that each menu item as at least one unique class. Use those
   classes in your CSS to apply images as backgrounds.
 *  Thread Starter [Kabyy](https://wordpress.org/support/users/kabyy/)
 * (@kabyy)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/image-in-menu/#post-2890412)
 * Hi and thanks for your quick answer !
 * I tried aswell and coded this:
 *     ```
       #access_home li.page-item-56{
       	background-image: url(http://www.mywebsite/wp-content/themes/twentyten_child/images/button_offer.png);
       ```
   
 * Is it wrong ?
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/image-in-menu/#post-2890560)
 * It looks OK to me. More importantly, is it working for you?
 *  Thread Starter [Kabyy](https://wordpress.org/support/users/kabyy/)
 * (@kabyy)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/image-in-menu/#post-2890562)
 * Nope and it makes me crazy… 🙂
 * But we are two persons working on this wordpress website so i guess we are creating
   problems for each others. No that I know it SHOULD be ok, i’ll try to identify
   what could have done the other that could possibly make a problem with this image.
 * Tanks !
 *  Thread Starter [Kabyy](https://wordpress.org/support/users/kabyy/)
 * (@kabyy)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/image-in-menu/#post-2890571)
 * Here is my menu code:
 *     ```
       <nav id="access_home" role="navigation">
   
       	<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
   
       	<div class="menu">
                        <ul>
                                 <li class="page_item page-item-108 current_page_item"><a href="http://www.mywebsite.com/">Home</a></li>
                                 <li class="page_item page-item-56"><a href="http://www.mywebsite.com/?page_id=56">Notre offre</a></li>
                                 <li class="page_item page-item-60"><a href="http://www.mywebsite.com/?page_id=60">Qui sommes nous ?</a></li>
                                  <li class="page_item page-item-2"><a href="http://www.mywebsite.com/?page_id=2">Sample Page</a><ul class='children'> <li class="page_item page-item-104"><a href="http://www.mywebsite.com/?page_id=104">test</a></li></ul></li>
                                  <li class="page_item page-item-58"><a href="http://www.mywebsite.com/?page_id=58">Vos attentes</a></li></ul></div>
       			</nav>
       ```
   
 * Why should I write in my css to consider the good `<li>` item according to you?
 * Thanks
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/image-in-menu/#post-2890587)
 * Something like:
 *     ```
       #access_home .menu .page-item-108 {
       background-image: url(images/button_offer.png);
       }
       ```
   
 * should work assuming that your images are in your current theme’s images sub-
   folder.
 *  Thread Starter [Kabyy](https://wordpress.org/support/users/kabyy/)
 * (@kabyy)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/image-in-menu/#post-2890588)
 * OMG I love you !
 * ID was still 56 but I was missing the “menu” id !
 * Thanks so much I’ve been looking for hours without even seeing it !
 * Bye
 *  Thread Starter [Kabyy](https://wordpress.org/support/users/kabyy/)
 * (@kabyy)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/image-in-menu/#post-2890589)
 * Page item was 56 I mean…

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Image in menu’ is closed to new replies.

## Tags

 * [images](https://wordpress.org/support/topic-tag/images/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)

 * 8 replies
 * 2 participants
 * Last reply from: [Kabyy](https://wordpress.org/support/users/kabyy/)
 * Last activity: [13 years, 10 months ago](https://wordpress.org/support/topic/image-in-menu/#post-2890589)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics