Post by sdd » 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:

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;
}

User avatar
sdd
New member

Posts

Joined
Sat Feb 06, 2021 6:21 am

Post by by mona » Sat May 15, 2021 1:46 am

We need a link to your site for that

DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.


https://www.youtube.com/watch?v=zXIxDoCRc84


User avatar
Expert Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by sdd » Sat May 15, 2021 2:22 am

Sorry
Last edited by sdd on Sat May 15, 2021 2:40 am, edited 1 time in total.

User avatar
sdd
New member

Posts

Joined
Sat Feb 06, 2021 6:21 am

Post by by mona » Sat May 15, 2021 2:34 am

no problem

It has not been written to work with mobiles. It could be done with css but would take considerable time, out of scope for the forum.
The issue is that it has not been written for mobiles - you need to discuss this with the developer -

DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.


https://www.youtube.com/watch?v=zXIxDoCRc84


User avatar
Expert Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by sdd » Sat May 15, 2021 2:41 am

Thank you I understand

User avatar
sdd
New member

Posts

Joined
Sat Feb 06, 2021 6:21 am

Post by by mona » Sat May 15, 2021 2:46 am

This is a quick fix till that will make it usable until you find a better solution

Code: Select all

@media (max-width: 768px) {
.box-karley ul li .catright li.ndlevel {
   display: block;
   width: initial;
   margin-left: 0px;
   padding: 0 15px 0;
}
.box-karley ul li .catright {
    width: 250px;
   }
}

DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.


https://www.youtube.com/watch?v=zXIxDoCRc84


User avatar
Expert Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by paulfeakins » Mon May 17, 2021 6:36 pm

sdd wrote:
Sat May 15, 2021 1:35 am
Any who can help me tweak this CSS file to where it would show nice on mobile?
What you're asking for is a project, so you could pay a developer such as ourselves or post a job in the Commercial Support Forum.

UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk


User avatar
Guru Member
Online

Posts

Joined
Mon Aug 22, 2011 11:01 pm
Location - London Gatwick, United Kingdom
Who is online

Users browsing this forum: DesignCart and 100 guests