WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] wp_nav_menu drop down issue (4 posts)

  1. João Leitão
    Member
    Posted 3 years ago #

    greetings,

    I just added a wp_nav_menu, but I don't seem to get it right. I can already connected the menu configuration panel on the admin side, but, the drop down is not activated - see here .

    to add the menu function to my theme i put this code to the functions

    add_theme_support( 'menus' );

    and this code to header

    <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>

    why is the drop down activated automatically? anything missing in the code above?

    thank you.

  2. Bill Erickson
    Member
    Posted 3 years ago #

    The nav menu is rendering correctly, but you don't have any CSS to turn it into a dropdown.

    wp_nav_menu() will generate a nested unordered list of your menu items, and its up to your theme to display this as desired. Open up the twenty-ten theme and look for the CSS relating to the navigation.

  3. João Leitão
    Member
    Posted 3 years ago #

    thank you for the tip! :) quite easy! greetings from Marrakech!

  4. stur
    Member
    Posted 2 years ago #

    You can follow any responses to simplify css code dropdovn menu.
    1) Add a class parent for items that have a submenu
    2) add depth class (depth0 , depth1, depth2 ...)

    add to function.php your theme

    class DD_Wolker_Menu extends Walker_Nav_Menu {
    	function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ){
    	    $GLOBALS['dd_children'] = ( isset($children_elements[$element->ID]) )? 1:0;
            $GLOBALS['dd_depth'] = (int) $depth;
            parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
        }
    }
    add_filter('nav_menu_css_class','add_parent_css',10,2);
    function  add_parent_css($classes, $item){
         global  $dd_depth, $dd_children;
         $classes[] = 'depth'.$dd_depth;
         if($dd_children)
             $classes[] = 'parent';
        return $classes;
    }

    now in header.php

    wp_nav_menu( array( 'container_class' => '','container' => '',  'menu' => 'header-menu', 'walker'=> new DD_Wolker_Menu ) );

    header-menu replaced by the name of your menu

    CSS simplified code may be the

    #menu-header-menu{
        margin: 0;
        padding: 0;
    }
    #menu-header-menu  ul{
    
    }
    
    #menu-header-menu> li{
        display: inline;
        margin-left: 1.618em;
    }
    #menu-header-menu  li{
        list-style: none;
    }
    #menu-header-menu  li a{
        text-decoration: none;
        font-size: 	1em;
        font-family:	'Lato',Helvetica,Arial,sans-serif ;
        letter-spacing:	1px;
    }
    #menu-header-menu li.parent::after{
        content:'+';
    }
    
    #menu-header-menu  .sub-menu {
       display: none;
       position: absolute;
       background-color: #fff;
    }
    
    #menu-header-menu  li:hover>.sub-menu{
        display: inline;
        width: auto;
        height: auto;
        border: solid 1px #BBBBBB;
        z-index: +1;
    }

    #menu-header-menu - id the main UL list

Topic Closed

This topic has been closed to new replies.

About this Topic