Need help with css custom menu mobile layout -Opencart 3.0.2.0
Posted: Sat May 15, 2021 1:35 am
Hello,
I have a custom menu that shows all categories and subcategories and all work wells except for mobile the menu appears full width. Any who can help me tweak this CSS file to where it would show nice on mobile? Thanks in advance for any help.
Here is css code:
I have a custom menu that shows all categories and subcategories and all work wells except for mobile the menu appears full width. Any who can help me tweak this CSS file to where it would show nice on mobile? Thanks in advance for any help.
Here is css code:
Code: Select all
.box-karley {
background: url('kmenu/bar_grey.jpg');
padding-left:10px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
height:32px;
}
.box-karley ul {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.box-karley a {
color: #333;
padding: 7px;
display: block;
text-decoration: none;
text-shadow: 1px 1px 1px #fff;
}
.box-karley ul {
position: relative;
}
.box-karley ul li .catright {
display: none;
position: absolute;
top: 32px;
left: -11px;
min-height: 120%;
padding-bottom: 10px;
width: 1000px;
z-index: 9999;
background: #fff url('kmenu/background_grey.png') top right no-repeat;
border: 1px solid #ddd;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
}
.box-karley ul li .catright h2 {
margin-left: 15px;
margin-top: 15px;
}
.box-karley ul li .catright .category-info {
margin-left: 15px;
margin-bottom: 10px;
}
.box-karley ul li.catfirst:hover .catright, .box-karley ul li.catfirst.act .catright {
display: block;
float: left;
}
.box-karley ul li.catfirst {
display: block;
float: left;
}
.box-karley ul li.catfirst {
background: url('kmenu/bar_grey.jpg');
background-repeat:repeat-x;
}
.box-karley ul li.catfirst a.lfirst {
font-size: 15px;
line-height: 12px;
display: block;
font-weight: 500;
padding: 9px;
padding-top: 10px;
padding-bottom: 10px;
color: #333;
border-bottom: 1px solid #fff;
text-decoration: none;
}
.box-karley ul li.catfirst.kids {
background: url('kmenu/bar_grey.jpg');
background-repeat:repeat-x;
}
.box-karley ul li.catfirst:hover {
background: #e9e9e9 url('kmenu/arrow_down.png') center bottom no-repeat;
}
.box-karley ul li.catfirst.kids:hover {
background: #e9e9e9;
}
.box-karley ul li .catright .nochild a.ndfirst {
width: 16%;
margin-left: 15px;
padding: 0px;
padding-top: 4px;
padding-bottom: 4px;
display: inline-block;
font-weight: bold;
color: #38B0E3;
border-bottom: 1px dashed #ddd;
}
.box-karley ul li .catright .nochild a.ndfirst:hover {
color: #111;
}
.box-karley ul li .catright li.ndlevel {
width: 22%;
display: inline-block;
vertical-align: top;
margin-left: 15px;
}
.box-karley ul li .catright li.ndlevel a {
color: #333;
font-weight: bold;
margin-top: 10px;
font-size: 13px;
background: #eee;
border: 1px solid #ddd;
border-bottom: none;
}
.box-karley ul li .catright li.ndlevel a:hover {
background: #fff;
}
.box-karley ul li .catright li.ndlevel ul.rdlevel {
border: 1px solid #ddd;
background: #f0f0f0;
}
.box-karley ul li .catright li.ndlevel ul.rdlevel:hover {
display:block;
}
.box-karley ul li .catright li.ndlevel ul li + li {
border-top: 1px dashed #ddd;
}
.box-karley ul li .catright li.ndlevel ul.rdlevel a {
color: #38B0E3;
font-weight: normal;
font-size: 12px;
margin-top: 0px;
padding-top: 5px;
padding-bottom: 5px;
background: none;
border: none;
}
.box-karley ul li .catright li.ndlevel ul.rdlevel a:hover {
color: #111;
}