WordPress.org

Support

Support » Themes and Templates » [Resolved] Horizontal menus not working with wp_nav_menu function

[Resolved] Horizontal menus not working with wp_nav_menu function

  • My horizontal menus work fine in static implementation but are not displaying as horizontal when using the wp nav menu array
    <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’)); ?>

    see working usage: http://howlingwolfmedia.com/wp-content/themes/custom3/index_menuTest.html
    now with wordpress tag inserted:
    http://howlingwolfmedia.com/site3
    the menu does not use the display:inline style

    Not sure how to write the tag in my nav area:

    <div id="navcontainer">
    <div id="menusimple">
    <ul>
    <li>
    		<a class="active" href="#">Navigation</a>
    		<?php wp_nav_menu( array( 'theme_location' => 'primary',  'container' => 'navcontainer', 'container_class'=> 'menusimple' )); ?>
    </li>
    </ul>
    </div> <!-- menus -->
    </div><!-- navcontainer -->

    most of the styling works except the inline display css. It’s just defaulting to vertical in the WP implementation.
    styles use only 2 classes: 1 for container, other for ul li elements.
    It works fine as static implementation:

    menu style follows:

    #navcontainer {
    	position: relative;
    	width: 100%;
    	background-image: url(../img/navbar_yelloworange.gif);
    	background-repeat: repeat-x;
    	z-index: 200;
    }
    
    #navcontainer li {display: inline; } /* test for wp tags */
    #menusimple li {display: inline; } /* test for wp tags */
    
    #menusimple {
    	width: 935px;
    	height: 33px;
    	position: relative;
    	margin-left: auto;
    	/* doesn't work  margin-right: auto; */
    	}
    
    #menusimple ul,
        #menusimple li,
        #menusimple span,
        #menusimple a {
    		margin: 0;
    		padding: 0;
    		position: relative;
    		z-index: 10;
        }
    #menusimple:after,
    #menusimple ul:after {
    		content: '';
    		display: block;
    		clear: both;
        }
    #menusimple a {
    		color: #2c353e;
    		display: inline-block;
    		min-width: 2em;
    		text-decoration: none;
    		line-height: 1.8em;
    		padding: .2em  1em  .1em  1em;
    		margin: .2em  .0 .1em  0;
        }
    #menusimple ul {
          list-style: none;
        }
    #menusimple > ul > li {
    		float: left;
    		font-family: Verdana, Trebuchet, Sans-Serif;
    		font-size: 1.2em;
    		font-weight: bold;
    		background-image: url(../img/navlink.gif);
    		background-repeat:no-repeat;
        }
    #menusimple > ul > li.active a {
    
        }
    #menusimple > ul > li.active a:hover {
    		background: #fff;
        }
    #menusimple > ul > li a {
    		background-image: none;
    
        }
    #menusimple > ul > li a:hover {
    		background: #fff;
        }
    #menusimple > ul > li:first-child a {
        }
    #menusimple > ul > li:last-child a {
    		border-right: none;
        }
    #menusimple li:hover ul {
    		display: block !important;
        }
    #menusimple li ul {
    		display: none;
    		position: absolute;
    		text-align: center;
        }
    #menusimple li ul li {
    		display:block;
    		width:200px;
    		margin-top: -2px;
    		padding-left: .2em;
    		border-top: 0;
    		border-left: 1px solid #000000;
    		border-bottom:1px solid #000000;
    		border-right: 1px solid #000000;
    		background:#c6cad2;
    		text-decoration: none;
    		font-weight: normal;
    		color: #000000;
    		text-align: left;
        }
    #menusimple li ul li a {
    		display: block;
    		font-size: .9em;
    		border-right: none;
    		border-bottom: 1px solid #ccc;
    		/* border: 1px solid #f00;*/
    		padding-left: -1px;
    		margin-left: -1px;
        }
    
    #menusimple li ul li:last-child a {
    		border-bottom: none;
    	}

Viewing 15 replies - 1 through 15 (of 23 total)
  • Your menu does display inline.

    Have you got Firefox? There’s a browser developer tool called Firebug that shows you the CSS applied to elements. If you have it, right click on your menu item and select “Inspect element”. A new toolbar should appear and on the right side you can scroll down the CSS.

    @andrew Nevins Thanks. I did just add that info to original post.

    I know the implementation is wrong (see top of orig post) b/c all i want to do is have a parent show and if child pages exist, they are dropdowns as in the static iteration. I tried using wp_list_pages with parent and children parameters as i used on the sidebars. However since i want the whole global nav to appear on the top nav bar, ‘wp_nav_menu ‘seemed more appropriate.

    Why is the navigation menu inside a navigation menu:

    <ul>
     <li>
      <a class="active" href="#">Navigation</a>
      <?php wp_nav_menu( array( 'theme_location' => 'primary',  'container' => 'navcontainer', 'container_class'=> 'menusimple' )); ?>
     </li>
    </ul>

    ?

    @andrew. Sorry i use the wrong url for the wp version, sb: http://howlingwolfmedia.com/site3 The issue is concentrating on menus at top in yellow bar (left side menus work fine). The slug at top called ‘navigation’ is hardcoded. That should be a parent element from the menu items… starting with MyClub | Become a Member | Fitness Programs | Mind Body. Some have child menus, some do not… those are the parent entries in my wp menus.

    @andrew b/c i don’t know how to implement this tag properly. I was just using a slug to see if the styles worked. Perhaps how i’ve coded the nav part is what’s screwing up the inline display. Could you tell me how to implement the tag properly based on my comment (above). I tried just using no div and adding some of the classes directly to the params of the wp_nav_menu tag and that screwed up my div format etc… blew out the template columns etc.

    These are the pages (and menu items) in my wp menu list. hyphens indicate child pages and are set up accordingly in the wp menu area.
    My Club

    – Cafe

    – Child Care

    – Current Programs

    – Facilities

    Become a Member

    – Corporate Discounts

    – Inquire

    – Member Benefits

    Classes

    Fitness Programs

    -A erobic Training

    – Aquatic Classes

    – Movement Assessment

    Mind Body

    Spa

    News

    Instead of this:

    <ul>
     <li>
      <a class="active" href="#">Navigation</a>
      <?php wp_nav_menu( array( 'theme_location' => 'primary',  'container' => 'navcontainer', 'container_class'=> 'menusimple' )); ?>
     </li>
    </ul>

    Try this:

    <?php wp_nav_menu( array( 'theme_location' => 'primary',  'container' => 'navcontainer', 'container_class'=> 'menusimple' )); ?>

    Yes!! This is better. I did try using the container and class elements in the param before. When i first tried this, the off margins screwed me up and I went in a bad direction. Thanks for keeping me on track again. All i need to do now is mess with margins on the #menusimple li ul li class as well as the top level ‘parent’ menus and that might do the trick. If you’re cool with helping on fixing the css on that i’d be grateful but i’d understand if you’re not up to it. Thanks again. You’re a prince.

    Try to get rid of this div:

    <div class="menu">

    It was <div id=”menusimple”>. Removing the id and just keeping the div did not work… broke the style. These are set as id # elements not classes per lots of samples and stuff i’ve read about menu ul li elements.

    I was referring to an element, “<div class='menu'>“. Undo whatever you just did and use that Firebug tool that I mentioned earlier to see what I mean.

    Sorry. Confused. You previously suggested getting rid of a class called ‘menu’ in my existing code. But it never existed. Only class used is an id called menusimple.
    I have firefox dev tool add on and used inspector tool. Still a moderate debugger here.
    I’ve reverted back to prev version using id=”menusimple” in the div tag.

    Since we cannot see your code you need to figure out what is causing “<div class='menu'>" to be added to your webpage.
    See this example screenshot of Chrome’s built-in “Inspect element” tool: http://snag.gy/20nn6.jpg to see that “div”.

    Ahhh… thank you for taking the time to clarify. It didn’t show in ‘inspector’ As i said, i need to start using these debug tools more and more to understand how to fix stuff. There is no usage of a class called ‘menu’ in either of the 2 stylesheets being used. Nor in the index.php page we’re testing from. I guess i’ll have to look into this further. Or figure out how to throw all relevant code in pastebin for sharing (argh). Again, thanks for diving into this with me. When i find the answer; i’ll post here. Thanks.

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘[Resolved] Horizontal menus not working with wp_nav_menu function’ is closed to new replies.
Skip to toolbar