How to Add Custom Navigation Menus in WooThemes Canvas

How to add custom navigation menus in WooThemes Canvas, via Child Theme*. In this case, I wanted to add a menu in the footer and this tutorial is perfect.

CSS for centering the footer menu (for Canvas v5.3.0 Child Theme):

/* Footer Menu styling. Source: http://woothemes.zendesk.com/entries/22533218-Add-Custom-Navigation-Menus-in-Canvas */
.custom-menu-location { margin-bottom: 20px; } /* Adding some spacing below the new navigation menu (and other menus with this custom CSS class). */
#navigation { margin-bottom: 15px; } /* Decrease the default spacing below the main navigation. */
/* Center footer menu. Source: http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/ */
.custom-menu-location ul.nav { /* Added .custom-menu-location to target just the footer menu while leaving the primary menu along */
 margin-bottom: 0;
 margin-right: 0; /* Changed from 30px to 0 */
 position: relative;
 text-align: center; /* Added */
 width: 100%; /* Changed from 0 to 100% */
}
.custom-menu-location ul.nav li { /* Added .custom-menu-location to target just the footer menu while leaving the primary menu along */
 display: inline-block; /* Added */
 float: none; /* Changed from left to none */
 list-style: none outside none;
 position: relative;
}

*Follow instructions to setup and use a WooThemes Canvas Child Theme.

Leave a Comment

Your email address will not be published.

Scroll to Top