wordpress custom menu appearance

Question

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

http://www.raccoonbox.com/sitedata

Answer 1 · 2015-01-08T18:06:30Z

January 8, 2015 6:06pm

Konstantin,

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">
        <div>
        <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">
              <li>
                <a href="#"><img src="wp-content/uploads/img/footer/arrowup.png" alt="Arrow Up" id="arror_rideup"></a>
              </li>
              <li>
                <p><a href="#">Raccoonbox tarjoaa ilmaisen kyydin ylös</a></p>
              </li>
            </ul>  
          </div>
          <p>Raccoonbox Oy – 2649560-3</p>
          <p>Nämä sivut on suunnitellut ja toteuttanut Raccoonbox.</p>
        </div><!-- .site-info -->
    </footer>

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.

Answer 2 · 2015-01-10T00:09:27Z

January 10, 2015 12:09am

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() {
    register_nav_menus(
        array(
            'header-nav' =>  'Header Navigation',
            'footer-nav' =>  'Footer Navigation'
        )
    );
}

Answer 3 · 2015-01-08T18:32:43Z

January 8, 2015 6:32pm

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' ) ); ?>

Welcome to the Treehouse Community

Looking to learn something new?

Konstantin Nikkari

Konstantin Nikkari

wordpress custom menu appearance

3 Answers

Liz Laffitte

Liz Laffitte

Jenny Stoffel

Jenny Stoffel

Konstantin Nikkari

Konstantin Nikkari

Liz Laffitte

Liz Laffitte