Hello,
The responsive menu CSS is in the dynamically generated CSS file. You should not edit it there because it will be overwritten after each template save. So, you should copy/paste this CSS code into the file /media/templates/site/spa/css/custom.css and edit what you need to:
Code:
/* RESPONSIVE TOP MENU */
.js .nav-collapse {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
zoom: 1;
}
.nav-collapse.opened {
max-height: 9999px;
position:absolute;
}
.nav-collapse.opened > ul {
position: fixed;
top: 0;
left: 5%;
width: 90%;
height: auto;
background:#444;
}
.nav-collapse.opened > ul ul {
width: 100%;
position: relative;
left:0;
padding:0;
margin:0;
background:#444;
border:0;
}
.nav-collapse.opened > ul ul li {
height:auto;
}
.nav-collapse.opened li {
width: 100%;
display: block;
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
text-align:initial;
}
.nav-collapse.opened li.active, .nav-collapse.opened li:hover {
background-color:#333;
}
.nav-collapse.opened li.active a {
color:#fff !important;
}
.nav-collapse.opened li a,
.nav-collapse.opened li span {
padding:0 15px;
margin:0;
line-height:50px;
height:50px;
color:#fff !important;
}
.nav-collapse.opened li li a,
.nav-collapse.opened li li span {
padding:0 30px;
line-height:30px;
height:30px;
}
.nav-toggle {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
background: url('../images/tinynav.png');
background-size: 42px 84px;
width: 42px;
height: 42px;
text-indent:-9999px;
display:inline-block;
float:right;
}
.nav-toggle.active {
position: fixed;
z-index: 999;
right: 5%;
top: 0;
margin-top:5px;
margin-right:15px;
background-position: bottom;
}
Regards,
Milos
