• Resolved lookitschloe

    (@lookitschloe)


    Hi, I know there are many threads about submenus (dropdown menus) and I think I’ve read all of them without them being able to help me. My submenus are not showing up.

    https://dev.adambobrow.com

    I am fairly proficient at HTML, CSS, and copying and pasting and adapting tutorials to my own needs (or so I thought I was, before I came to this problem which I don’t think should be as big of a problem as it is). In the past, I have just been modifying existing themes; this is the first theme I’m creating myself. I have built a custom menu. I don’t know how to enable submenus. Can someone please tell me how to do that?

    My menus page in the WP dashboard looks like this:
    https://www.evernote.com/shard/s255/sh/815c02d5-06a4-4951-9c03-8d18ecdcd9ba/b713209b11291e2593202fcd5e123db0

    I’m not actually sure what the difference between moving a menu item to the right and assigning a parent to a page, so I did both because I am just really trying anything to make something, anything, show up under “About” upon hover.
    https://www.evernote.com/shard/s255/sh/69adf00a-f72c-41f3-b4cc-ca576f7b8045/b45050ffb2eb50f83be227958f8644f9

    Looking at the breadcrumbs and URL path on https://dev.adambobrow.com/about/voice-over/ , you can see that Voice Over is a child item of About.

    https://dev.adambobrow.com/videos/ is not showing up on the main nav, meaning it should be under About when you hover your mouse over About. However, the breadcrumbs show that it “should” be accessible from any page (Home >> Videos).

    In my functions.php:

    /* MENU */
    add_theme_support( 'menus' );
    
    if(function_exists('register_nav_menu')):
    	register_nav_menu( 'primary_nav', 'Primary Navigation');
    	register_nav_menu( 'videos_nav', 'Video Categories');
    endif;

    In my header.php:

    <div id="nav">
                <div id="navmenu">
    
                    	<?php if(function_exists('wp_nav_menu'))
    						wp_nav_menu(
    									array(
    										  'menu' =>'primary_nav',
    										  'container'=>'',
    										  'depth'=>1,
    										  'menu_id'=>'menu',
    										  'dropdown_class'=>'dropdown',)
    						);
    						else
    					?>
    
                        <ul id="current">
                    <?php if (is_page('About')) {
    echo " id=\"current\"";
    }?>
    				</ul>
                </div>
                </div>

    In my style.css:

    /* Navigation */
    #nav {
    	background-color:#ff05f1;
    	width:100%;
    	position:relative;
    	height:36px;
    }
    
    #navmenu ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	list-style-image: none;
    	padding: 4px 0 0;
    	position:relative;
    	text-align:center;
    }
    
    #navmenu li {
    	display: inline;
    	font-family:'GillSans';
    	font-size: 1.3em;
        letter-spacing: -0.1em;
    }
    
    #navmenu a {
    	text-decoration:none;
        text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000;
    }
    
    #navmenu ul li a {
        padding: 17px 4px;
        text-transform: uppercase;
    	color:yellow;
    }
    
    ul#current {
    	display:none;
    }
    
    #navmenu a:hover {
    	background-image:url(images/rollover2.png);
    	background-position:center top;
    	padding:17px 4px;
    	background-repeat:no-repeat;
    }
    
    li.current_page_item a{
       background-image:url(images/rollover2.png);
       background-position:center top;
       background-repeat:no-repeat;
    }
    
    .dropdown li ul{
    	display:block;
    }

    I would really appreciate any help anyone can give me! I have installed and activated Gecka Submenu and that’s not working for me either. Thank you!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • first of all i don’t see the need for this piece of code? unless you are inserting content with css or javascript?

    else
    ?>
    <ul id="current">
    <?php if (is_page('About')) {
    echo " id=\"current\"";
    }?>
    </ul>

    second please review the codex docs about the wp_nav_menu: https://codex.www.ads-software.com/Function_Reference/wp_nav_menu

    Your nav function should look something like this:

    <?php 
    
    if(function_exists('wp_nav_menu')) {
    
        wp_nav_menu( array(
                'theme_location' => 'primary_nav', //Use theme location as that is the menu location you registered it against
                'container'      => '', // Seeing as you already include the function in a container this is fine
                'depth'          => 0 //Include all menu items of any depth
            )
        );
    
    }
    
    ?>
    Thread Starter lookitschloe

    (@lookitschloe)

    Thank you so much for your reply.

    The piece of code in question is the only way I could make the current page in the nav bar be highlighted (the green spiky behind the text). If you have a cleaner way, I’m open to suggestions! I had tried about 2 different things before I found one that worked.

    Update — I just realized I had .current_page_item already coded to have the green spiky image behind the text, which I found thanks to the link you provided. I’ve deleted that piece of code in question entirely. Thanks for that!

    Unfortunately my menu is still not working (dev.adambobrow.com). As you can see, the child items of “About” are showing up. This happened after I changed ‘depth’ to 0.

    How do I hide the two items under “About” and only have them show up upon mouse hover?

    Based on the link provided in the above response, I added some code to functions.php where my menu is, starting with “add_filter”:

    /* MENU */
    add_theme_support( 'menus' );
    
    if(function_exists('register_nav_menu')):
    	register_nav_menu( 'primary_nav', 'Primary Navigation');
    	register_nav_menu( 'videos_nav', 'Video Categories');
    endif;
    
    add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' );
    function add_menu_parent_class( $items ) {
    
    	$parents = array();
    	foreach ( $items as $item ) {
    		if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
    			$parents[] = $item->menu_item_parent;
    		}
    	}
    
    	foreach ( $items as $item ) {
    		if ( in_array( $item->ID, $parents ) ) {
    			$item->classes[] = 'menu-parent-item';
    		}
    	}
    
    	return $items;
    }

    Here is my nav markup:

    <div id="nav">
                <div id="navmenu">
    
                    	<?php if(function_exists('wp_nav_menu'))
    						wp_nav_menu(
    									array(
    										  'theme_location' =>'primary_nav',
    										  'container'=>'',
    										  'depth'=>0,
    										  'menu_id'=>'menu',
    										  'dropdown_class'=>'dropdown',)
    						);
    						else
    					?>
                </div>
                </div>

    I can see through the “inspect element” feature on Chrome that I now have a ul class called “sub-menu.” I am just not sure what to do with it. Playing with the display properties yielded no satisfactory results. I think I just need a little more help to get this to work.

    Thank you!

    Thread Starter lookitschloe

    (@lookitschloe)

    Never mind, I got it — I put

    #nav ul li:hover > ul {
    	display: block;
    }

    and it works. Just need to style the rest. Thank you!

    Thread Starter lookitschloe

    (@lookitschloe)

    marking this as resolved.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How do I register a submenu?’ is closed to new replies.