Title: Image Based Nav Bar
Last modified: August 21, 2016

---

# Image Based Nav Bar

 *  [sevenglaciers](https://wordpress.org/support/users/sevenglaciers/)
 * (@sevenglaciers)
 * [13 years ago](https://wordpress.org/support/topic/image-based-nav-bar/)
 * [http://www.sevenglaciers.com](http://www.sevenglaciers.com)
 * Hi, I’m trying to make an image based nav bar. I’m using code as follows, and
   i’m just trying to get one of the images working at the moment so i know how 
   to do it. Can someone tell me what i’m doing wrong or help me figure this out?
 * blog.sevenglaciers.com/wp-content/Images/Screen%20Shot%202013-04-13%20at%2011.38.16%
   20PM.png
 * This is what i’m trying to get it to look like 🙂
 *     ```
       nav.mainMenu {
       	padding: 0px;
       	margin-left: 0px;
       	margin-right: auto;
       	display:block;
       	float:left;
       	height:15px;
       	text-indent:-9999px;
       }
       nav.mainMenu ul li {
       	display: inline;
       	list-style: none;
       	margin-right: 20px;
       }
       nav.mainMenu ul {
       	padding: 0px;
       }
   
       li#shop {
       	width:45px;
       	background: url(http://blog.sevenglaciers.com/wp-content/Images/Shop.png) no-repeat;
       }
       ```
   
 *     ```
       <nav class="mainMenu">
                       <ul class="clearfix">
                       	<li id="about">
                           	<a href="http://blog.sevenglaciers.com/about-2/">ABOUT.</a>
                           </li>
                           <li id="chrometrails">
                           	<a href="http://chrometrails.bandcamp.com" target="_blank">CHROME TRAILS.</a>
                           </li><li id="contact">
                          	 <a href="http://blog.sevenglaciers.com/contact/">CONTACT.</a>
                           </li>
                           <li id="glaciercast">
                           	<a href="http://blog.sevenglaciers.com/glaciercast/">GLACIERCAST.</a>
                           </li>
                           <li id="join">
                           	<a href="http://blog.sevenglaciers.com/join/">JOIN.</a>
                           </li>
                           <li id="shop">
                          	 	<a href="http://blog.sevenglaciers.com/shop-2/">SHOP.</a>
                           </li>
                           <li id="twitter">
                           	<a href="http://twitter.com/chrometrails" target="_blank">TWITTER.</a>
                           </li>
                       </ul>
                   </nav>
       ```
   

Viewing 1 replies (of 1 total)

 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [13 years ago](https://wordpress.org/support/topic/image-based-nav-bar/#post-3656808)
 * I don’t see the menu visible on your site at all – though some menu code is there.
   You can use the page-item specific class to add the images – for example:
 *     ```
       <li class="page_item page-item-26">
       <a href="http://blog.sevenglaciers.com/about-2/">ABOUT.</a>
       ```
   
 * would be something like (can’t test it because your menu is not working/visible)
 *     ```
       nav.mainMenu li.page-item-26 {
         styles here;
       }
       ```
   

Viewing 1 replies (of 1 total)

The topic ‘Image Based Nav Bar’ is closed to new replies.

## Tags

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

 * 1 reply
 * 2 participants
 * Last reply from: [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * Last activity: [13 years ago](https://wordpress.org/support/topic/image-based-nav-bar/#post-3656808)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics