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!

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 custom menu appearance

I'm using a WordPress custom menu in my footer area. How can I target and select it in my css so that I can eg. make the font smaller and remove ul list dots with list-style: none; code.

No I have code <?php wp_nav_menu( array( 'menu' => 'footer-menu', 'container_class' => 'footer-menu' ) ); ?>

but .footer-menu {} in my style.css does nothing.

Please help! :)


3 Answers


I opened uo your site and used Chrome's developer tools (ctrl+shift+c) to find your footer element:

<footer id="colophon" class="site-footer" role="contentinfo">
        <a href="http://raccoonbox.com"><img src="wp-content/uploads/img/footer/raccoonbox_logo_white.png" alt="Raccoonbox Logo White" id="raccoonbox_logo_white"></a>
          <h6>© 2015 Raccoonbox Oy</h6>
          <div class="menu-footer-menu-container"><ul id="menu-footer-menu" class="menu"><li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://raccoonbox.com/sitedata/ehdot-ja-yksityisyydensuoja/">Ehdot ja Yksityisyydensuoja</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://raccoonbox.com/sitedata/ota-yhteytta/">Ota yhteyttä</a></li>
</ul></div>          <p>Ehdot, yksityisyyden suoja, ota yhteyttä</p>
          <a href="http://facebook.com/racbox"><img src="wp-content/uploads/img/footer/facebook.png" alt="Facebook Logo" class="somelogo"></a>
          <a href="http://twitter.com/racbox"><img src="wp-content/uploads/img/footer/twitter.png" alt="Twitter Logo" class="somelogo"></a>
          <a href=""><img src="wp-content/uploads/img/footer/linkedin.png" alt="Linkedin Logo" class="somelogo"></a>
          <a href=""><img src="wp-content/uploads/img/footer/vimeo.png" alt="Vimeo Logo" class="somelogo"></a>          
          <div id="footer_rideup">
            <ul class="rideup">
                <a href="#"><img src="wp-content/uploads/img/footer/arrowup.png" alt="Arrow Up" id="arror_rideup"></a>
                <p><a href="#">Raccoonbox tarjoaa ilmaisen kyydin ylös</a></p>
          <p>Raccoonbox Oy – 2649560-3</p>
          <p>Nämä sivut on suunnitellut ja toteuttanut Raccoonbox.</p>
        </div><!-- .site-info -->

Start with:

#colophon {


.site-footer {

and get more specific as you target specific parts of the footer, like the lists to remove the bullets.

Hope this helps! Let me know if you need more help.

You might need to register a footer menu in your functions.php and assuming the code above is already in your footer.php: here is an example from this site: http://premium.wpmudev.org/blog/how-to-add-navigation-menus-to-your-wordpress-theme/ Looks like you have most hooks in place already.

// This adds more than one menu location
add_action( 'init', 'paukai_register_multiple_menus' );
function paukai_register_multiple_menus() {
            'header-nav' =>  'Header Navigation',
            'footer-nav' =>  'Footer Navigation'

Thanks a lot!

.site-footer ul {
    list-style: none;

I did it! Also #colophon worked. But they worked only with the "ul" typed after the selector. Also I still don't understand why class footer-menu didn't work even if I have this in the markup:

 <?php wp_nav_menu( array( 'menu' => 'footer-menu', 'container_class' => 'footer-menu' ) ); ?>

PHP is beyond me at this point, so I can't help with that part. Sorry :/

Maybe find a user with a lot of PHP points and tag them, asking them to help?