Mtn. Dog Media

WooThemes Canvas Mobile Menu Customizations

We love¬†WooThemes Canvas¬†because of how customizable and straight forward it is. Canvas allows us to develop custom WordPress themes for our clients that are unique to their brand identity. Many of the website styles can be adjusted from within the WordPress Dashboard without any code, but at Mtn. Dog Media we’ve learned that to really make these website’s sing, you’re going to need a few extra CSS tricks.

Our latest WooThemes Canvas customization is brand specific mobile menu design. Without any custom CSS the default mobile menu isn’t that pretty, in fact, it’s downright lame:

Default WooThemes Canvas Mobile Menu

But with a little CSS, this menu can shine and match your beautiful, branded website:

Customized WooThemes Canvas Mobile Menu

For all you other WooThemes Canvas loving developers and designers out there, here is the CSS I put into our Canvas Child Theme’s stylesheet to execute these mobile menu customizations:

/* MOBILE NAV */
/* mobile nav fonts */
@media only screen and (max-width: 767px) {
#navigation {
font-weight: 200;
font-family: Roboto Slab;
font-size: 25px;
text-transform: uppercase;
}

/* background color */
#navigation {
background: #31a9c5;
}

/* removing home description (mobile nav) */
#navigation .nav-home, #navigation .nav-close, #navigation ul.rss li a, #navigation ul.cart a.cart-contents, #navigation ul.nav-search a.search-contents {
text-indent: -1200px;
}

/* background color of X and Home icons */
#navigation .nav-home, #navigation .nav-close, #navigation ul.rss li a, #navigation ul.cart a.cart-contents, #navigation ul.nav-search a.search-contents {
background: #121c38;
}

/* active/current link */
ul.nav li.current_page_item a, ul.nav li.current_page_parent a, ul.nav li.current-menu-ancestor a, ul.nav li.current-cat a, ul.nav li.current-menu-item a {
background: #31a9c5;
color: #fff;
}

/* all other links */
ul.nav li a {
padding: .5em 1em;
display: block;
color: #fff;
}

ul.nav li ul li a {
background: none !important;
color: #fff!important;
}
}

/* END OF MOBILE NAV */