WordPress.org

Support

Support » How-To and Troubleshooting » Upgraded to 3.0.1 for menu , cant drop down menu

Upgraded to 3.0.1 for menu , cant drop down menu

  • nixtainternet
    Member

    @nixtainternet

    Hey guys

    First post, please be gentle.

    Have been running WP 2.9 and just upgraded to 3.0.1. (nice and easy!)

    The reason for the upgrade was to use the menu (in admin) so that I could create drop down menus, but unfortuantly when I create a menu, it just shows everything in the menu space (top of nixta.co.uk) instead of showing the top level then on hover/click showing the rest of the 2nd level.

    I added to my function.php file

    add_theme_support( ‘menus’ );

    I also added this to my header.php

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

    but like I say, I get no ‘drop-down’ effect on the menus, just the complete list of both hierachys of the menu.

    I hope I make sense to you?

    many thanks

Viewing 7 replies - 1 through 7 (of 7 total)
  • The fact that you can see the menu means that you have added the menu to your theme correctly.

    For submenu items to appear as drop downs, however, you will need to do some css.

    Have a look at Son of Suckerfish

    For acroweb.co.uk, I used css very similar to the Twenty Ten theme (the Pricing Outline menu drops down):

    #access {
    	background: #000;
    	display: block;
    	float: left;
    	margin: 0 auto;
    	width: 940px;
    }
    #access .menu-header,
    div.menu {
    	font-size: 13px;
    	margin-left: 12px;
    	width: 928px;
    }
    #access .menu-header ul,
    div.menu ul {
    	list-style: none;
    	margin: 0;
    }
    #access .menu-header li,
    div.menu li {
    	float: left;
    	position: relative;
    }
    #access a {
    	color: #aaa;
    	display: block;
    	line-height: 38px;
    	padding: 0 10px;
    	text-decoration: none;
    }
    #access ul ul {
    	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    	display: none;
    	position: absolute;
    	top: 38px;
    	left: 0;
    	float: left;
    	width: 180px;
    	z-index: 99999;
    }
    #access ul ul li {
    	min-width: 180px;
    }
    #access ul ul ul {
    	left: 100%;
    	top: 0;
    }
    #access ul ul a {
    	background: #333;
    	line-height: 1em;
    	padding: 10px;
    	width: 160px;
    	height: auto;
    }
    #access li:hover > a,
    #access ul ul :hover > a {
    	background: #333;
    	color: #fff;
    }
    #access ul li:hover > ul {
    	display: block;
    }
    #access ul li.current_page_item > a,
    #access ul li.current-menu-ancestor > a,
    #access ul li.current-menu-item > a,
    #access ul li.current-menu-parent > a {
    	color: #fff;
    }
    * html #access ul li.current_page_item a,
    * html #access ul li.current-menu-ancestor a,
    * html #access ul li.current-menu-item a,
    * html #access ul li.current-menu-parent a,
    * html #access ul li a:hover {
    	color: #fff;
    }
    nixtainternet
    Member

    @nixtainternet

    Thank you for your quick response.

    I have added the menu (menus addon with wordpress 3.0.1) to the site with no problem as you say.

    my current style.css is

    [Mod Note: Code segment removed. If you want to post large blocks of code, please use a pastebin (Alternate URL). Thanks!]

    Can I ask if you could hold my hand and point out where I need to add these changes ?

    Many Thanks

    nixtainternet
    Member

    @nixtainternet

    I have added it as

    http://pastebin.ca/1983510

    However – nothing is any different, the same problem is there.

    Am I right in thinking that the built in menu system of 3.0.1. is not actually meant to have drop down menus ?

    The 3.0.1 menu system creates un-numbered lists as your menus.

    When you have a sub menu item, it nests the un-numbered lists.

    Using css you can transform these nested un-numbered lists into drop down menus.

    However, you cannot just copy and paste the code I gave you unless you have added the relevant div to your php template.

    Open your header.php file and take a look.

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

    with

    <div id="access">
    <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>
    </div>

    This will put the nav menu into the #access div (which is what is being styled by the above css).

    I am just guessing here as I cannot see your code. If that doesn’t work, upload your header.php code and I will take a look for you.

    nixtainternet
    Member

    @nixtainternet

    Thank You !!

    Seems to work a beauty !!

    now I just need to work out how to lose all the colouring so that it matches my site .. at the moment its using your nice black look

    Thank you very much !!

    I have just written a tutorial for this very problem.

    Check out how to add horizontal drop-down css menus to your custom wordpress theme (from scratch).

    nixtainternet
    Member

    @nixtainternet

    THANKS EMILEKOTT

    Will give thsi a try when the day slows down.. thank you 😀

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Upgraded to 3.0.1 for menu , cant drop down menu’ is closed to new replies.