Reset Mobile Navigation

When viewing our responsive themes on mobile or small viewport, the main navigation is switched to mobile menu (see screenshot below). If for any reason you want to reset it to traditional list menu, follow the step below.

mobile nav

To reset the mobile navigation:

Go to Themify > Styling > Custom CSS and paste in the following CSS code:


/* reset mobile menu */
@media screen and (max-width: 480px) {

	#menu-icon {
		display: none;
	}
	#main-nav-wrap {
		position: static;
	}
	
	/* main nav */
	#main-nav {
		position: inherit;
		width: auto !important;
		padding: 0;
		display: block;
		background: none !important;
		border: none !important;
		
		box-shadow: none;
		border-radius: none;
	}
	#main-nav li {
		clear: none !important;
		float: left !important;
		margin: 0 5px 0 0 !important;
		padding: 0 0 7px !important;
		position: relative;
		display: inline-block;
		zoom:1;
		*display:inline;
	}
	
	/* sub-levels link */
	#main-nav ul a  {
		padding: 6px 0 6px 15px !important;
		margin: 0 !important;
		width: 180px !important;
	}
	
	/* sub-level ul */
	#main-nav ul {
		width: 190px !important;
		margin: 0 !important;
		padding: 5px 0 !important;
		position: absolute;
		left: -4px;
		top: 28px;
		background: #fff;
		border: solid 1px #ddd;
		border-bottom-color: #bbb;
		z-index: 100;
		display: none;
	}
	#main-nav ul li {
		background: none;
		padding: 0;
		margin: 0;
		display: block;
		float: none !important;
	}
	
	/* sub-sub-level dropdown */
	#main-nav ul ul {
		left: 190px;
		top: -2px;
	}
	
	/* show dropdown ul on hover */
	#main-nav li:hover > ul {
		display: block;
	}

}
/* end reset mobile menu */