Customize mobile menu

Version 1.9.2 and higher

@media screen and (max-width: 650px) {
/* Main mobile menu*/
.js .main-nav {
	background-color: #585858;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));
	background-image: -webkit-linear-gradient(top, #585858, #3d3d3d);
	background-image: -moz-linear-gradient(top, #585858, #3d3d3d);
	background-image: -ms-linear-gradient(top, #585858, #3d3d3d);
	background-image: -o-linear-gradient(top, #585858, #3d3d3d);
	background-image: linear-gradient(top, #585858, #3d3d3d);
		clear: both;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);
}
/* Current page menu text */
.js .main-nav #responsive_current_menu_item {
	color: #fff;
}
/* Dopdown item */
.js .main-nav .menu li a {
	color: #444;
}
/* Dropdown current item */	
.js .main-nav .menu li.current_page_item,
.js .menu .current_page_item a,
.js .menu .current-menu-item a {
	background-color: #f5f5f5;
}
/* Hover on dropdown items */
.js .main-nav .menu li a:hover,
.js .main-nav .menu li li a:hover {
	background-image: none;
	filter: none;
	background-color: #f5f5f5!important;
}
}

Version 1.9.1 and lower

Here are the different classes that you can use to style the mobile menu.

/* Main mobile menu area */
.sb-holder {
	background-color: #3d3d3d;
}
/* Text for current page */
.sb-options a:link,
.sb-options a:visited {
	color:#666;
}
/* Dropdown Text */
.sb-options a:link,
.sb-options a:visited {
    color: #444;
    text-decoration: none;
}
/* hover effect on dropdown menu */
.sb-options a:hover,
.sb-options a:focus,
.sb-options a.sb-focus {
    background-color: #f5f5f5;
    color: #444;
}

 

Was this article helpful?

Related Articles