Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Shaun Taylor
Shaun Taylor
2,654 Points
Posted by 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

Michael Pare
Michael Pare
6,358 Points

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
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 :)

Michael Pare
Michael Pare
6,358 Points
Michael Pare
Michael Pare
6,358 Points

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
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 :)