Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

Shaun Taylor
Shaun Taylor
2,654 Points

Drop-down navigation in a custom Wordpress template...

Hi all,

I was hoping someone would be able to help me.

I've just completed the 'Converting Static HTML into WordPress Templates' module and I've followed along, however I'm building my own website while following, not the 'portfolio' website they use in the example.

My problem arises when I get to the menu section. I've passed everything and I have my menu included using the suggested php and I've styled it and it looks as I want.

The difference between my menu and the example one is, mine has one top level button 'services' that needs to expand when you hover over it and show the sub pages.

I have set these sub pages up in the Wordpress backend in the Appearance -> menus section, but this doesn't seem to be enough.

Any help would be massively appreciated!!

Thanks,

Shaun,

4 Answers

If you are using the same menu that is created in the "how to build a wordpress theme", you need to remove the strip_tags around the wp_nav_menu declaration.

stripping the li and ul tags from around the links removes the classes that wordpress uses to style dropdown menus. Enabling this will probably break your formatting if you've designed around only having the anchor tags as in the videos.

After that you will need to add some CSS to make the menus hide and display properly on hover something like below would work:

/* Set dropdown menu to display none by default */
nav ul.sub-menu {display:none}

/* Display any ul nested within an li on hover */
nav li:hover ul {display:block}
Shaun Taylor
Shaun Taylor
2,654 Points

Hi Michael,

Thanks for the reply - I'm not 100% sure which parts to remove. here's the code from my header.php which pulls in the menu:

<ul class="nav">
<?php

    $args = array(
        'menu' => 'main-menu',
        'echo' => false
    );

echo strip_tags(wp_nav_menu( $args ), '<a>');

?>
</ul>

And I have this in the Functions file:

// Enable custom menus
add_theme_support('menus');

So you say the strip tags? I can obviously say where it says echo strip_tags - but which bits should I remove? do i just leave that line saying: wp_nav_menu( $args ) - ? I'll be fine with the CSS, its just this part I'm struggling with.

Thanks again :)

Remove the echo=> false from your $args array as well as the 'echo strip_tags and the <a>.

So to call your array all you need to do is say wp_nav_menu($ args);

You can go back and watch the "coding the header and footer" video for reference. Relevant part starts at about 4:00 :)

Shaun Taylor
Shaun Taylor
2,654 Points

Ah thank you!! I think I have it! Now just to sort the CSS.

Thanks a lot for your help :)