Change styling of mobile menu on Woothemes Canvas WordPress theme

Just styled the mobile menu on the Cardiff Web Design site, which is now a child theme based on Woothemes Canvas WordPress theme and thought I would share the code with you, in case you also need it.

Paste the code below into your child theme and tweak the colours to your heart’s content

@media only screen and (max-width: 768px) {
/* mobile styles go below this line */
#navigation {

background: #194167; }
#navigation h3 {
font-size: 1em;
padding: 0.7em 1em;
color:#f38210;
text-transform:uppercase;
}
.nav li{
width:100%;
text-align: left;
background: #194167;
color: #ffffff;
}
ul.nav li ul li a {
background: none repeat scroll 0% 0% transparent !important;
color: #ffffff; !important;
}
ul.nav li a {
padding: 0.5em 1em;
display: block;
color: #ffffff;
}
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: none repeat scroll 0% 0% #f38210;
color: #ffffff;
}
ul.nav li ul li a {
background: none repeat scroll 0% 0% transparent !important;
color: #ffffff !important;
}
#navigation .nav-home:before, #navigation .nav-close:before, #navigation .cart-contents:before, #navigation ul.rss li a:before {
background: #F38210;
color: #ffffff;
}

}

No comments yet.

Leave a Reply

Site by Chas