Slicknav overlap desktop menu

I added this to my css yet, the issue not resolved rather it hiddens the horizontal menu and nothing shown at all.

.slicknav_menu {
	display:none;
}
@media(max-width:1225px) {
	.menu-bar-wrap {
		display:none;
	}
	.slicknav_menu {
		display:block;
	}
}

My complete code below

.navigation ul.menu:after {
clear: both;
}

.navigation ul.menu > li {
float: left;
background: #e9e9e9;
padding: 0;
margin: 0;
}

.navigation ul.menu > li a {
text-decoration: none;
padding: 1.5em 3em;
display: block;
}

.navigation ul.menu > li:hover {
background: #f0f0f0;
}

.navigation ul.menu li:hover > ul {
display: block;
}

.navigation ul.menu > li > ul {
display: none;
width: 100%;
background: #f0f0f0;
padding: 20px;
position: absolute;
z-index: 99;
left: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}

.navigation ul.menu > li > ul:before,
.navigation ul.menu > li > ul:after {
content: “”;
display: table;
}

.navigation ul.menu > li > ul:after {
clear: both;
}

.navigation ul.menu > li > ul > li {
margin: 0;
padding-bottom: 0;
list-style: none;
width: 25%;
background: none;
float: left;
}

.navigation ul.menu > li > ul > li a {
color: #777;
padding: .2em 0;
width: 95%;
display: block;
border-bottom: 1px solid #ccc;
}

.navigation ul.menu > li > ul > li > ul {
display: block;
padding: 0;
margin: 10px 0 0;
list-style: none;
box-sizing: border-box;
}

.navigation ul.menu > li > ul > li > ul:before,
.navigation ul.menu > li > ul > li > ul:after {
content: “”;
display: table;
}

.navigation ul.menu > li > ul > li > ul:after {
clear: both;
}

.navigation ul.menu > li > ul > li > ul > li {
float: left;
width: 100%;
padding: 10px 0;
margin: 0;
font-size: .8em;
}

.navigation ul.menu > li > ul > li > ul > li a {
border: 0;
}

.navigation ul.menu > li > ul.normal-sub {
width: 300px;
left: auto;
padding: 10px 20px;
}

.navigation ul.menu > li > ul.normal-sub > li {
width: 100%;
}

.navigation ul.menu > li > ul.normal-sub > li a {
border: 0;
padding: 1em 0;
}

.slicknav_menu {
display:none;
}
@media(max-width:1225px) {
.menu-bar-wrap {
display:none;
}
.slicknav_menu {
display:block;
}
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style’s
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width: 959px) {
.menu-container {
width: 100%;
}

]
.menu-dropdown-icon:before {
display: block;
}
.navigation ul.menu {
display: none;
}
.navigation ul.menu > li {
width: 100%;
float: none;
display: block;
}
.navigation ul.menu > li a {
padding: 1.5em;
width: 100%;
display: block;
}
.navigation ul.menu > li > ul {
position: relative;
}
.navigation ul.menu > li > ul.normal-sub {
width: 100%;
}
.navigation ul.menu > li > ul > li {
float: none;
width: 100%;
margin-top: 20px;
}
.navigation ul.menu > li > ul > li:first-child {
margin: 0;
}
.navigation ul.menu > li > ul > li > ul {
position: relative;
}
.navigation ul.menu > li > ul > li > ul > li {
float: none;
}
.menu .show-on-mobile {
display: block;
}
}

• This reply was modified 4 years, 4 months ago by shaibustephen.