Adding Pure.css menu classes to WordPress menus
27 March 2015 #Code
Update: The code below has been updated to work with nested menus with drop-downs.
In Pure.css 0.6.0 the structure of menus has been changed to use a specific class for the <ul> container, <li> item and <a> link:
So if you’re generating your navigation in WordPress using the built-in Menus you’re going to need to get these classes into your HTML elements.
WordPress provides a function called ‘Walker’ which is not something I would begin to pretend to understand fully, I just know the following code works:
- Add this code to your theme’s functions.php
- Then call your menu like this
<ul class="pure-menu-list"> <?php wp_nav_menu( array('theme_location'=>'main-menu', 'walker' => new Pure_Menu_Walker(), 'items_wrap' => '%3$s', 'container' => false) ); ?> </ul>
You should then end up with the correct classes in the correct places to continue using Pure.css menus.
Want more? Subscribe for updates.
Have feedback? Say hello.
If you found this post useful or have questions send me a message!