Image Based Nav Bar

  • https://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(https://blog.sevenglaciers.com/wp-content/Images/Shop.png) no-repeat;
}
    <nav class="mainMenu">
                <ul class="clearfix">
                	<li id="about">
                    	<a href="https://blog.sevenglaciers.com/about-2/">ABOUT.</a>
                    </li>
                    <li id="chrometrails">
                    	<a href="https://chrometrails.bandcamp.com" target="_blank">CHROME TRAILS.</a>
                    </li><li id="contact">
                   	 <a href="https://blog.sevenglaciers.com/contact/">CONTACT.</a>
                    </li>
                    <li id="glaciercast">
                    	<a href="https://blog.sevenglaciers.com/glaciercast/">GLACIERCAST.</a>
                    </li>
                    <li id="join">
                    	<a href="https://blog.sevenglaciers.com/join/">JOIN.</a>
                    </li>
                    <li id="shop">
                   	 	<a href="https://blog.sevenglaciers.com/shop-2/">SHOP.</a>
                    </li>
                    <li id="twitter">
                    	<a href="https://twitter.com/chrometrails" target="_blank">TWITTER.</a>
                    </li>
                </ul>
            </nav>

Viewing 1 replies (of 1 total)

  • 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="https://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