WordPress.org

Ready to get started?Download WordPress

Forums

[closed] wp_nav_menu, adding a div around the secondary ul (4 posts)

  1. yulichka
    Member
    Posted 2 years ago #

    Hello!
    I'm trying to re-work a hard-coded navigation menu that someone else built into one that is controlled by WordPress.

    The basic setup of the hard-coded menu is:

    <div id="nav">
    	<ul>
    		<li><a>About Us</a>
    		    <div class="flare">
    			<ul>
    				<li></li>
    			</ul>
    		    </div><!--END .flare-->
    		</li>
    	</ul>
     </div><!--END #nav-->

    What I'm particularly after is the <div class="flare"> around the secondary ul. Is it possible to add that to a wp_nav_menu? I'm using Starkers and modifying as I go along.

    Any help would be greatly appreciated. Thanks!

  2. Digital Raindrops
    Member
    Posted 2 years ago #

    Look at the default twenty eleven theme styles for #access, you should be able to style it like they do in twenty eleven changing to natch your id's have a look at these:

    You would use something like:

    #nav .flare ul {
    
    }

    or maybe:

    #nav ul ul {
    
    }

    These are the ones from twenty eleven!

    [CSS code moderated - for any code over 10 lines, please use the pastebin]

    HTH

    David

  3. yulichka
    Member
    Posted 2 years ago #

    Thanks!
    I tried to approach the styling like that, but couldn't quite get the same effect that the original menu had. The .flare is taller than everything else.

    I think I'm going to try this approach first: http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output, controlling the output of the navigation. If I can't figure that out, though, it'll be back to creatively styling what I do have.

    Cheers!

  4. yulichka
    Member
    Posted 2 years ago #

    Just as a note for anyone who ends up with the same problem, here is the code I ended up using for the custom walker:

    class Walker_Page_Custom extends Walker_Nav_Menu {
    
    function start_lvl(&$output, $depth) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<div class='flare'><ul>\n";
    	}
    
    function end_lvl(&$output, $depth) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div><!--flare -->\n";
    	}
    
    }

    Thanks again for the help

    [duplicate of http://wordpress.org/support/topic/wp_nav_menu-adding-a-div-around-the-secondary-ul?replies=4 - closed]

Topic Closed

This topic has been closed to new replies.

About this Topic