Title: align navigation images in primary menu
Last modified: August 20, 2016

---

# align navigation images in primary menu

 *  [befree22](https://wordpress.org/support/users/befree22/)
 * (@befree22)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/align-navigation-images-correctly/)
 * I read [this forum post](http://wordpress.org/support/topic/theme-twenty-eleven-image-in-navigation-twenty-eleven-theme?replies=16)
   and I’ve got my navigation image [About us] in place at [http://tmmcom.dreamhosters.com/](http://tmmcom.dreamhosters.com/)
 * The code for the navigation images in the header.php and the .css file is [http://pastebin.com/4hZqaD55](http://pastebin.com/4hZqaD55)
 * I’m having alignment issues.
    1. I want the images to line up with the top and
   bottom navigation bar (lines). 2. The [home] image is displaying in the lower
   navigation menu (below the search box), not the top (main) navigation menu where
   it belongs. The child theme uses 2 navigation menus, a top menu and a lower navigation
   menu.
 * FYI: I’m using [TwentyPlusPro](http://zeaks.org/ttodemo/), a Twenty Twelve child
   theme.

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

 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/align-navigation-images-correctly/#post-3221002)
 * You need to be adding those images as background images in the CSS code for the
   menu items. That’s not what you have right now.
 *  Thread Starter [befree22](https://wordpress.org/support/users/befree22/)
 * (@befree22)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/align-navigation-images-correctly/#post-3221026)
 * I’m repasted the css code showing images as bkgd images:
 *     ```
       css code:
       li.page-item-2 a,
       li.page-item-4 a {
           text-indent: -9999px;
           width: 124px;
           height: 32px;
           background: url(http://www.tmmcom.dreamhosters.com/wp-content/themes/twenty-plus-pro/images/about-in.gif) top center no-repeat !important;
       }
       ```
   
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 6 months ago](https://wordpress.org/support/topic/align-navigation-images-correctly/#post-3221027)
 * If you want to expand those background images, you need to do-so within some 
   sort of image-manipulating software irrelevant to WordPress. Do you want to do
   this?
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/align-navigation-images-correctly/#post-3221028)
 * Yes, that one is a background image — you can adjust the alignment of that image
   using the margins in this CSS:
 *     ```
       .main-navigation li {
           margin: 0 2.85714rem 0 0;
       }
       ```
   
 * But the home image is not a background image – it’s in the HTML code below the
   nav menu — here:
 *     ```
       </nav><!-- #site-navigation -->
       <img src="http://tmmcom.dreamhosters.com/wp-content/themes/twenty-plus-pro/images/home.gif" alt="home" />
       ```
   
 * Presumably you added that to the header.php file?
 *  Thread Starter [befree22](https://wordpress.org/support/users/befree22/)
 * (@befree22)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/align-navigation-images-correctly/#post-3221029)
 * I added the “home” image code you posted and now there are 2 “home” images displaying
   in the LOWER navigation menu. The “home” image belongs in the top menu, WordPress’
   main aka primary menu.
 * I’m repasting the header.php code here (your code included):
 *     ```
       </nav><!-- #site-navigation -->
               <img src="http://tmmcom.dreamhosters.com/wp-content/themes/twenty-plus-pro/images/home.gif" alt="home" />
   
          <?php $page_id=get_the_ID(); /* Add navigation imgages */
          if(is_home()) { $image='home.gif'; }
          if(is_page()) { $image='head-image-'.$page_id.'.gif'; };
          if(!file_exists(STYLESHEETPATH.'/images/'.$image)) { $image='home.gif'; } //specific image not found, use default header image set as the same as the posts page header image
          echo '<img src="'.get_stylesheet_directory_uri().'/images/'.$image.'" alt="home" />'; ?>
       ```
   
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/align-navigation-images-correctly/#post-3221030)
 * What I was trying to say (and the code I posted above) is showing what is WRONG—
   you need to remove all of that. Sorry if it was not clear. Any menu images need
   to be in the CSS code as background images — you’ll need a separate CSS section
   for each menu item — with the image for that item and using the specific page
   id or class in the selector.
 * In fact the CSS code you are using above is already problematic because it is
   assigning the same image to two menu items (page-item-2 and page-item-4) — but
   only one shows up right now because you don’t have a page-item-2.
 *  Thread Starter [befree22](https://wordpress.org/support/users/befree22/)
 * (@befree22)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/align-navigation-images-correctly/#post-3221032)
 * OK, I removed all of the above code from the header so now only the “About” image
   displays. Yes, I have to add the page for page-item-4.
 * Right now, I want to know that images are displaying and aligning correctly b4
   I migrate the site.
 * I added the following code for the “home page and it appears to work:
 *     ```
       .main-navigation .current-menu-item > a,
         .main-navigation .current-menu-ancestor > a,
         .main-navigation .current_page_item > a,
         .main-navigation .current_page_ancestor > a {
           color: #636363;
           font-weight: bold;
           text-indent: -9999px;
           width: 124px;
           height: 32px;
           background: url(http://www.tmmcom.dreamhosters.com/wp-content/themes/twenty-plus-pro/images/home.gif) top center no-repeat !important;
       }
       ```
   
 * Why is there a space between the “home” and “about” images? I do have a divider/
   spacer I’d like to put between the nav images. How do I do that? I added the 
   following but it’s not working:
 *     ```
       li.page-item-2 a {
           text-indent: -9999px;
           width: 124px;
           height: 32px;
           background: url(http://www.tmmcom.dreamhosters.com/wp-content/themes/twenty-plus-pro/images/about-in.gif; url(http://www.themiraclemerchant.com/skin/frontend/default/miracle/images/divider.gif) top center no-repeat !important;
       }
       ```
   
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/align-navigation-images-correctly/#post-3221033)
 * Oops sorry, my browser cache messed me up — will look again.
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/align-navigation-images-correctly/#post-3221034)
 * The code shows this:
 *     ```
       li.page-item-2 a, li.page-item-4 a {
           background: url("http://www.tmmcom.dreamhosters.com/wp-content/themes/twenty-plus-pro/images/about-in.gif") no-repeat scroll center top transparent !important;
           height: 32px;
           text-indent: -9999px;
           width: 124px;
       }
       ```
   
 * so remove the `, li.page-item-4 a` from it.
 * To adjust the spacing – change the margin in this CSS:
 *     ```
       .main-navigation li {
           margin: 0 2.85714rem 0 0;
       }
       ```
   
 *  Thread Starter [befree22](https://wordpress.org/support/users/befree22/)
 * (@befree22)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/align-navigation-images-correctly/#post-3221066)
 * The spacing between the nav images worked when I added “px” to the numbers — 
   The “rem” measurement doesn’t work. Ex. `margin: 0px;`
 * Now how to I add the divider/spacer from [this site](http://www.themiraclemerchant.com/skin/frontend/default/miracle/images/divider.gif)
   between each nav image? What css code can I insert between each nav image to 
   display the divider?
 * I’m reading [http://digitalraindrops.net/2010/09/menu-images/](http://digitalraindrops.net/2010/09/menu-images/)
   to get some ideas, specifically
 *     ```
       #access li {
        background: url(http://www.tmmcom.dreamhosters.com/wp-content/themes/twenty-plus-pro/images/divider.gif) no-repeat right center;
       }
       ```
   

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

The topic ‘align navigation images in primary menu’ is closed to new replies.

## Tags

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

 * 10 replies
 * 3 participants
 * Last reply from: [befree22](https://wordpress.org/support/users/befree22/)
 * Last activity: [13 years, 6 months ago](https://wordpress.org/support/topic/align-navigation-images-correctly/#post-3221066)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics