wp_nav_menu horizontal CSS

  • koreill1

    (@koreill1)


    12 years, 2 months ago

    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 – please post a link to your site]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter koreill1

    (@koreill1)

    12 years, 2 months ago

    My CSS can be found here:

    http://pastebin.com/fssj57tB

    Foxearedass

    (@foxearedass)

    12 years, 2 months ago

    <?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

    (@koreill1)

    12 years, 2 months ago

    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

    (@foxearedass)

    12 years, 2 months ago

    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

    (@koreill1)

    12 years, 2 months ago

    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

    (@foxearedass)

    12 years, 2 months ago

    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.