Replace mobile menu with normal menu

This guide is for Responsive-Mobile theme. This CSS will help with defining when the normal menu is activated. The code “min-width: 600px” defines when the normal menu is activated. You can change it to when you want the normal menu to be activated. To disable the mobile menu completely you can remove “@media (min-width: 600px) {” and the closing bracket “}”.

Guide: Adding custom CSS

@media (min-width: 600px) {
#mobile-nav-button {
display: none;
}
#mobile-current-item {
display: none;
}
#main-navigation ul {
display: block;
}
#main-navigation .main-nav ul {
padding: 0;
}
#main-navigation .main-nav ul:before, #main-navigation .main-nav ul:after {
content: " ";
display: table;
}
#main-navigation .main-nav ul:after {
clear: both;
}
#main-navigation .main-nav ul li {
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: left;
}
#main-navigation .main-nav ul li:hover > ul {
display: block;
}
#main-navigation .main-nav ul li li:hover > ul {
left: 100%;
top: 0;
}
#main-navigation .main-nav ul li a {
margin: 13px;
color: #eeeeee;
}
#main-navigation .main-nav ul li a:hover {
text-decoration: none;
color: #999999;
}
#main-navigation .main-nav ul li > ul {
position: absolute;
z-index: 999;
width: auto;
min-width: 200px;
padding: 0;
background-color: #333333;
}
#main-navigation .main-nav ul li ul {
display: none;
}
#main-navigation .main-nav ul li ul li {
float: none;
}
#main-navigation .main-nav ul li ul li a {
line-height: 2.5em;
white-space: nowrap;
}
#main-navigation .main-nav .menu li li a::before {
content: '';
position: relative;
margin-left: 0;
}
}

Categories: