WordPress.org

1. planky
   Member
   Posted 1 year ago #

   Im trying to convert the following code to work with Menus in WordPress 3.0.
   

   <div id="navigation">
   			<div class="navi"><a href="/index.shtml">Home</a></div>
   			<div class="navi"><a href="/about.shtml">About Us</a></div>
   			<div class="navi"><a href="/ourlocation.shtml">Our Place</a></div>
   			<div class="navi"><a href="/alpacasforsale.shtml">For Sale</a></div>
   			<div class="navi"><a href="/links.shtml">Links</a></div>
   			<div class="navi"><a href="/contact.shtml">Contact</a></div>
   		</div>

   wp_nav_menu outputs with an unordered list, so following the guide at http://codex.wordpress.org/Creating_Horizontal_Menus, I updated my stylesheet with the following:

   #navigation ul {
   	float: left;
   	width: 128px;
   	height: 32px;
   	margin: 0;
   	padding: 0;
   	background: url("design/nav_link.png");
   	background-position: 0 -32px;
   	list-style-type: none; list-style-image: none;
   	}
   
   #navigation li {display: inline; }

   For whatever reason, display: inline; does not seem to apply. I've checked it in Firebug and it not being overridden that I could see, but still displays in a vertical list - what have I missed?

   I have a dev site up at thealpacaplace.no-ip.org

2. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #

   Remove width:128px; from #navigation ul and display:block; and change display:block; to display:inline-block in #navigation a. Finally get rid of width:100%; in #navigation a.

3. planky
   Member
   Posted 1 year ago #

   Thank you esmi

Topic Closed

This topic has been closed to new replies.