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

Styling the nav in WordPress

I know there are some more videos coming soon about styling the wp theme but I was trying to add some CSS to the wp_nav_menu in the header.php page and was having some trouble. When I tried adding a div class my wp_nav_menu, my site went blank.

<p> This is the header </p>
 <?php $args = array(
 'menu' => 'main-menu'
 );

 wp_nav_menu( $args );
?>

5 Answers

John Locke
John Locke
15,479 Points

@ardon You might want to try something like this instead.

<?php wp_nav_menu( array('menu' => 'Main Navigation' )); ?>

where Main Navigation is the name of your top level navigation menu.

I use Chrome Developer Tools (right click) > Inspect Element to see what the class is, and then write accordingly. If I need to add a class, I can either wrap it in another div, or try to figure out where in the PHP it is writing the menu, and have it add a class there.

Thanks for the suggestion, John! I'm going to play around with that.

John Locke
John Locke
15,479 Points

Let us know if that works.

I was up for a few hours last night trying to figure out why my menu wouldn't style. My nav id wouldn't show up in inspector. I reinstalled everything and that did the trick. When all else fails, reinstall eh. Thanks again.

John Locke
John Locke
15,479 Points

Sometimes you have to reinstall. Glad it all worked out in the end :)