WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Horizontal menus not working with wp_nav_menu function (24 posts)

  1. lberelson
    Member
    Posted 1 year ago #

    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;
    	}
  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  3. lberelson
    Member
    Posted 1 year ago #

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

  4. lberelson
    Member
    Posted 1 year ago #

    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.

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    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>

    ?

  6. lberelson
    Member
    Posted 1 year ago #

    @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.

  7. lberelson
    Member
    Posted 1 year ago #

    @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.

  8. lberelson
    Member
    Posted 1 year ago #

    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

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    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' )); ?>
  10. lberelson
    Member
    Posted 1 year ago #

    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.

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try to get rid of this div:

    <div class="menu">
  12. lberelson
    Member
    Posted 1 year ago #

    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.

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  14. lberelson
    Member
    Posted 1 year ago #

    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.

  15. Andrew
    Forum Moderator
    Posted 1 year ago #

    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".

  16. lberelson
    Member
    Posted 1 year ago #

    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.

  17. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try deactivating plugins to explore whether any could be responsible.

  18. lberelson
    Member
    Posted 1 year ago #

    Thanks. No plugins being used in this installation... tho it is part of a multisite network with a couple plugins on other installs:
    http://snag.gy/eHs9C.jpg

  19. Andrew
    Forum Moderator
    Posted 1 year ago #

    If you can't remove it then change this CSS:

    #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;
        }

    To this:

    #menusimple .menu > 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 .menu > ul > li.active a {
    
        }
    #menusimple .menu > ul > li.active a:hover {
    		background: #fff;
        }
    #menusimple .menu > ul > li a {
    		background-image: none;
    
        }
    #menusimple .menu > ul > li a:hover {
    		background: #fff;
        }
    #menusimple .menu > ul > li:first-child a {
        }
    #menusimple .menu > ul > li:last-child a {
    		border-right: none;
        }
  20. lberelson
    Member
    Posted 1 year ago #

    So far no luck. I'll get back to this in a couple days. I think i need a breather. Thanks again.

  21. lberelson
    Member
    Posted 1 year ago #

    Seems the tag as currently employed, is not recognizing the styles after the first li tag?

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

    also tried earlier suggestion:

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

    doesn't go past the first li which 'may' be why the subnavs are all positioned at the first parent menu item.

    *removed the wp tag from here: http://howlingwolfmedia.com/site3/index2.php and css works fine (same as menuTest.html ref'd earlier in initial post)

  22. lberelson
    Member
    Posted 1 year ago #

    Source code reveals auto styling via WP that adds classes such as 'page_item' and 'children' so the answer is probably here: http://codex.wordpress.org/Styling_Lists_with_CSS
    I probably need to adjust the menu.css accordingly to reflect these new classes.

  23. lberelson
    Member
    Posted 1 year ago #

    The problem was I was using this 'specifity' character '>' in my menu styling e.g. #menusimple > ul > li. Removing the horizontal carrot fixed it. I did 'not' need to include the sub classes 'children' or 'page_item which is added by WordPress.

  24. lberelson
    Member
    Posted 1 year ago #

    OK I got it!! The problem was that i was not hooking the menu in my wordpress site. I didn't select the primary menu from the drop down in menus appearance... duh!! So the code was correct.
    http://snag.gy/7BKcK.jpg

Topic Closed

This topic has been closed to new replies.

About this Topic