Title: wp_nav_menu horizontal CSS
Last modified: August 20, 2016

---

# wp_nav_menu horizontal CSS

 *  [koreill1](https://wordpress.org/support/users/koreill1/)
 * (@koreill1)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/wp_nav_menu-horizontal-css/)
 * I cannot seem to get my wp_nav_menu navigation menu to list itself horizontal.
   Instead the list is stacking itself vertically.
 * My html/php is:
 *     ```
       <ul id="nav">
       	<li class="nav-start"> </li>
               <?php wp_nav_menu( array( 'theme_location' => 'primary') ); ?>
       	<li class="nav-end"> </li>
       </ul>
       ```
   
 * my CSS is:
 * _[CSS [code moderated ](http://codex.wordpress.org/Forum_Welcome#Posting_Code)–
   please post a link to your site]_

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

 *  Thread Starter [koreill1](https://wordpress.org/support/users/koreill1/)
 * (@koreill1)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/wp_nav_menu-horizontal-css/#post-2581807)
 * My CSS can be found here:
 * [http://pastebin.com/fssj57tB](http://pastebin.com/fssj57tB)
 *  [Foxearedass](https://wordpress.org/support/users/foxearedass/)
 * (@foxearedass)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/wp_nav_menu-horizontal-css/#post-2581859)
 * <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’) ); ?> generates it’s
   own ul and li tags so you do not need to have it wrapped in yours. try something
   like
 *     ```
       <nav id="navigation" role="navigation">
         <?php wp_page_menu( 'sort_column=menu_order' ); ?>
       </nav>
       ```
   
 * now #navigation – will controlled the container for the menu.
 * .menu ul li – will control how your link blocks will look
 * .menu ul li.current_page_item – will controll how the menu item for the current
   page looks, only add in changes to the original class, no use having all the 
   same stuff.
 * as far as getting them to line up horizontal. use float: left; in .menu ul li.
 * hope this helps
 *  Thread Starter [koreill1](https://wordpress.org/support/users/koreill1/)
 * (@koreill1)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/wp_nav_menu-horizontal-css/#post-2581991)
 * Thanks, but I tried your suggestion and I still can’t get it to work. If wp_nav_menu
   has it’s own ul and li tags, how do I adjust the css for those to make it float:
   left?
 *  [Foxearedass](https://wordpress.org/support/users/foxearedass/)
 * (@foxearedass)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/wp_nav_menu-horizontal-css/#post-2582003)
 * just use <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’) ); ?> without
   any wrapping divs or anything to start. reload the page then look at the source
   code. find the code for the navigation.
 * currently mine looks like.
 * `<div class="menu"><ul><a href="http://localhost/wordpress/" title="Home"><li
   class="current_page_item">Home</li></a><a href="http://localhost/wordpress/?page_id
   =14"><li class="page_item page-item-14">About Us</li></a><a href="http://localhost/
   wordpress/?page_id=21"><li class="page_item page-item-21">Contact</li></a></ul
   ></div>`
    so to modify properties for one of the li i would do `.menu ul li` 
   that’s `<div class="menu">` `<ul>` `<li class="current_page_item">`
 * adding current_page_item like
    `.menu ul li.current_page_item` will modify the
   link for the current page only.
 * don’t use the <?php wp_page_menu( ‘sort_column=menu_order’ ); ?> i gave you in
   my first reply, that was a mistake by me.
 *  Thread Starter [koreill1](https://wordpress.org/support/users/koreill1/)
 * (@koreill1)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/wp_nav_menu-horizontal-css/#post-2582022)
 * ok, I took your advice, and I’m a step closer. I now have the menu in-line, by
   making updates nav ul li:
 *     ```
       #nav ul li{
       	display: block;
       	float: left;
       <strong>	clear: right;</strong>
       	margin: 0;
       	padding: 0;
       <strong>	width: auto; </strong>
       	height: auto;
       	line-height: 100%;
       	overflow: hidden;
       	white-space: normal;
       }
       ```
   
 * Now I’m having the problem where the menu options are squished together:
 * HomeStoreShopping CartArchives
 * But if I set width above to anything except auto, the options are listed vertically
   again
 * Home
    Store Shopping Cart Archives
 *  [Foxearedass](https://wordpress.org/support/users/foxearedass/)
 * (@foxearedass)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/wp_nav_menu-horizontal-css/#post-2582048)
 * you need to make sure the the element they are nested in is width enough.
    any
   chance you could post the link so i can take a looksie?

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

The topic ‘wp_nav_menu horizontal CSS’ is closed to new replies.

## Tags

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

 * 6 replies
 * 2 participants
 * Last reply from: [Foxearedass](https://wordpress.org/support/users/foxearedass/)
 * Last activity: [14 years, 2 months ago](https://wordpress.org/support/topic/wp_nav_menu-horizontal-css/#post-2582048)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics