Change when the mobile menu is displayed

If you want to change the point the mobile menu is displayed then you will want disable the mobile menu first.

Then can add this css to activate later when using a smaller device.

@media screen and (max-width: 480px) {

	.js .main-nav {
		position: relative;
		height: 30px;
		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);
		margin: 0 auto;
	}

	.js .main-nav .menu {
		display: none;
		position: absolute;
		width: 100%;
		top: 30px;
		z-index: 1000;
	}

	.js .main-nav .menu ul {
		margin-top: 1px;
	}

	.js .main-nav .menu li {
		float: none;
		background-color: #fff;
		border: none;
	}

	.js .main-nav .menu li a {
		color: #444;
		font-size: 13px;
		font-weight: normal;
		height: 45px;
		line-height: 45px;
		padding: 0 15px;
		border: none;
		border-bottom: 1px solid #f5f5f5;
		text-shadow: none;
		text-align: left;
	}

	.js .main-nav .menu li.current_page_item,
	.js .menu .current_page_item a,
	.js .menu .current-menu-item a {
		background-color: #f5f5f5;
	}

	.js .main-nav .menu li li:hover {
		background: none!important;
	}

	.js .main-nav .menu li li a {
		position: relative;
		padding: 0 10px 0 30px;
	}

	.js .main-nav .menu li li li a {
		position: relative;
		padding: 0 10px 0 40px;
	}

	.js .main-nav .menu li a:hover,
	.js .main-nav .menu li li a:hover {
		background-image: none;
		filter: none;
		background-color: #f5f5f5!important;
	}

	.js .main-nav .menu li li a::before {
		content: '2013';
		position: absolute;
		top: 0;
		left: 20px;
	}

	.js .main-nav .menu li li li a::before {
		content: '2013';
		position: absolute;
		top: 0;
		left: 20px;
	}

	.js .main-nav .menu li li li a::after {
		content: '2013';
		position: absolute;
		top: 0;
		left: 30px;
	}

	.js .main-nav .menu li ul {
		position: static;
		visibility: visible;
		background-color: #fff;
	}

	.js .main-nav #responsive_current_menu_item {
		position: absolute;
		display: block;
		top: 5px;
		left: 15px;
		color: #fff;
		font-weight: 700;
	}

	.js .main-nav a#responsive_menu_button {
		position: absolute;
		display: block;
		top: 0;
		left: 100%;
		height: 30px;
		width: 23px;
		margin-left: -30px;
		background: url('images/select-icons.png') 0 5px no-repeat;
	}

	.js .main-nav a#responsive_menu_button.responsive-toggle-open {
		background: url('images/select-icons.png') 0 -46px no-repeat;
	}
}

Refer to this Guide for more : Adding custom css

Categories: