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

Tamas Dukai
Tamas Dukai
6,103 Points
Posted by Tamas Dukai
Tamas Dukai
6,103 Points

Styling navigation issue

Hi,

I'm doing the "WordPress theme development" => "Coding A Basic Navigation in WordPress" video.

I added this code and my nav menu appears fine:

<?php
            $defaults = array(
                    'container' => false,
                    'theme_location' => 'primary-menu',
                    'menu_class' => 'navbar-nav mr-auto'
            );

            wp_nav_menu($defaults);

            ?>

but in my menu the <li> elements also has their own class. How can I define the classes for the li elements?

2 Answers

Tamas Dukai
Tamas Dukai
6,103 Points
Tamas Dukai
Tamas Dukai
6,103 Points

In my markup the li elements had their own class, but if I replaced my menu with the dynamic wp_nav_menu those styles disappeared. But by targeting it via its ul I managed to work around the issue.

Jacob Mishkin
Jacob Mishkin
23,118 Points

that totally works, What I suggested earlier was to have custom names for your li elements, if you just want to style using the given classes then there you go! Glad you figured out your problem.

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

What you will have to do is to create a custom Walker nav menu class. Treehouse does not offer a course on it, just so you know you will need to know how to create a class in PHP to do this. I would google custom nav walker WordPress, and you will find several tutorials on the topic. If you never coded in PHP, it may look daunting, but at the end you will be able to add custom classes to your li elements.

Tamas Dukai
Tamas Dukai
6,103 Points
Tamas Dukai
Tamas Dukai
6,103 Points

Thanks for the reply. I actually managed to do it with css by targeting the li of the ul.

Jacob Mishkin
Jacob Mishkin
23,118 Points

What were you trying to do then? just style the li? or create class names to them?