Post by rocketfoot » Tue Dec 06, 2022 4:25 am

Hi guys...I have a small design problem and the theme author is on the other side of the world...can anyone tell me where to look and how to fix 3rd level dropdowns that are closing to fast? You can't barely get to the 3rd levels to click a link before it disappears! You can see what I mean by going to my site and trying to click some nav items with 3rd level carats.

www.wattstruckcenter.com/shop
Last edited by rocketfoot on Wed Dec 07, 2022 6:56 pm, edited 1 time in total.

OpenCart 3.0.3.8
www.wattstruckcenter.com/shop


User avatar
Active Member

Posts

Joined
Fri Nov 15, 2013 10:47 pm

Post by straightlight » Tue Dec 06, 2022 8:24 am

Custom theme. Contact the extension theme developer to resolve this issue.

Dedication and passion goes to those who are able to push and merge a project.

Regards,
Straightlight
Programmer / Opencart Tester


Legendary Member

Posts

Joined
Mon Nov 14, 2011 11:38 pm
Location - Canada, ON

Post by by mona » Tue Dec 06, 2022 9:33 pm

At a guess you added some styling to make the 3rd level further away and with a white border - it does not close fast - it closed because your cursor left
Put the css back

Looks like you may have changed the width ? something like this should fix it

Code: Select all

#nav-one li .megamenu.column1 ul.list-unstyled > li.dropdown .dropdown-menu {
    left: 176px;
}

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 » Tue Dec 06, 2022 11:06 pm

rocketfoot wrote:
Tue Dec 06, 2022 4:25 am
can anyone tell me where to look and how to fix 3rd level dropdowns that are closing to fast?
Looking at the site (that I know we'll be auditing soon) it appears that animated menu is quite complex, so there may not be a quick fix. It could be there appears to be a small gap between that 3rd level which makes it disappear when the mouse tries to move over to it. So I think it's going to need someone good with CSS to fiddle around with it for a bit.

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

Post by by mona » Wed Dec 07, 2022 12:05 am

It is not complicated - but it would help to establish what was the intended change that caused the space in order to get the desired effect without messing with the structure of the menu itself.

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 rocketfoot » Wed Dec 07, 2022 12:20 am

by mona wrote:
Tue Dec 06, 2022 9:33 pm
At a guess you added some styling to make the 3rd level further away and with a white border - it does not close fast - it closed because your cursor left
Put the css back

Looks like you may have changed the width ? something like this should fix it

Code: Select all

#nav-one li .megamenu.column1 ul.list-unstyled > li.dropdown .dropdown-menu {
    left: 176px;
}
I tried this but it had no effect on the dropdowns. I am not real good with CSS so I just have no idea where to look for this...but I do understand that it is the gap between the dropdown bubbles. I have contacted the theme dev but he doesn't reply too often and when he does, it takes forever to get a simple answer. So I ask you guys for help! :)

I think it is part of this custom CSS:

Code: Select all

/* -------------
 * Selects
 * ------------- */
/* Custom Select*/
span.customSelect {
	font-size:12px;
	border: 1px solid #e5e5e5;
	background-color: #fff;
	color: #333;
	text-decoration: none;
	white-space: nowrap;
	text-align:left;	
	height:34px;
}
span.customSelect option {font-size:12px !important;}
span.customSelect.changed {
	background-color: #f0dea4;
}
.customSelectOpen {
  -moz-box-shadow: none;
  -webkit-box-shadow: none; 
  box-shadow: none;
}
.form-control.hasCustomSelect{ width: 90% !important; }
.customSelectInner {
	background:url('../../image/codezeel/select-arrow-down.gif') no-repeat center right;
	width:100% !important;
}
.customSelectOpen .customSelectInner{ background:url('../../image/codezeel/select-arrow-up.gif') no-repeat center right; }

#input-sort , #input-limit, #product .form-group select { cursor:pointer;}
#account-wishlist .text-right button, 
#account-wishlist .text-right a.btn.btn-danger {
    padding: 7px 15px;
}


/* TREEVIEW CATEGORY LEFT */
.treeview-list, .treeview-list ul { 
	padding: 0;
	margin: 0;
	list-style: none;
}
.treeview-list ul {
	background:none; 
	margin:0px;
}
.treeview-list .hitarea {
	background: none;
	height: 9px;
	width: 9px;
	float: right;
	cursor: pointer;
}
/* fix for IE6 */
* html .hitarea { display: inline;float:none; }
.treeview-list li { margin: 0; }
.treeview-list li.last, .treeview-list li.lastExpandable {border:none;}
.treeview-list a.selected { background-color: #eee; }

.treeview-list .hover { color:#38B0E3; cursor: pointer; }
.treeview-list li a:hover,.treeview-list li.nav-1 a:hover	 {   cursor:pointer; }
.treeview-list li ul li:hover	{ background:none;}
.treeview-list li a { display:inline;  padding-left:0px; }
.treeview-list li.active a	{ font-weight:bold; /*color:#D09E00 ;*/  } 
.treeview-list li.active ul li a	{ font-weight:normal; color:#5E5E5E;}		
.treeview-list li ul li { background:none; border-bottom:none; }
.treeview-list .collapsable .expandable-hitarea { 
    height: 20px;
    width: 20px ;
	text-align:right;
} 
.treeview-list .expandable .collapsable-hitarea{ 
    height: 20px;
    width: 20px ;
	text-align:right;  
} 

.treeview-list .expandable-hitarea { 
    height: 20px;
    width: 20px ;
	text-align:right;
} 
.treeview-list .collapsable-hitarea { 
   	height: 20px;
    width: 20px;
	text-align:right;
}
.treeview-list .expandable .collapsable-hitarea, 
.treeview-list .expandable-hitarea{
	background:url(../../image/codezeel/sprite.png) no-repeat scroll -44px -65px;
}
.responsive-menu .expandable .collapsable-hitarea, 
.responsive-menu .expandable-hitarea{
	background:url(../../image/codezeel/sprite.png) no-repeat scroll -44px -65px;
}
.treeview-list .collapsable .expandable-hitarea, 
.treeview-list .collapsable-hitarea{
	background:url(../../image/codezeel/sprite.png) no-repeat scroll -44px -94px;
}
.responsive-menu .collapsable-hitarea{
	background:url(../../image/codezeel/sprite.png) no-repeat scroll -44px -94px;
}
/* TREEVIEW CATEGORY LEFT */


/* FancyBox */

.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	vertical-align: top;
}

.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
}

.fancybox-skin {
	position: relative;
	background: #f9f9f9;
	color: #444;
	text-shadow: none;
	-webkit-border-radius: 4px;
	 -khtml-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}

.fancybox-opened {
	z-index: 8030;
}

.fancybox-opened .fancybox-skin {
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
	position: relative;
}

.fancybox-inner {
	overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}

.fancybox-error {
	color: #444;
	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	margin: 0;
	padding: 15px;
	white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
}

.fancybox-image {
	max-width: 100%;
	max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
	background-image: url('../../image/codezeel/fancybox_sprite.png');
}

#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	background-position: 0 -108px;
	opacity: 0.8;
	-webkit-opacity: 0.8;
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	cursor: pointer;
	z-index: 8060;
}

#fancybox-loading div {
	width: 44px;
	height: 44px;
	background: url('../../image/codezeel/fancybox_loading.gif') center center no-repeat;
}

.fancybox-close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 8040;
}

.fancybox-nav {
	position: absolute;
	top: 0;
	width: 40%;
	height: 100%;
	cursor: pointer;
	text-decoration: none;
	background: transparent url('../../image/codezeel/blank.gif'); /* helps IE */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	z-index: 8040;
}

.fancybox-prev {
	left: 0;
}

.fancybox-next {
	right: 0;
}

.fancybox-nav span {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 34px;
	margin-top: -18px;
	cursor: pointer;
	z-index: 8040;
	visibility: hidden;
}

.fancybox-prev span {
	left: 10px;
	background-position: 0 -36px;
}

.fancybox-next span {
	right: 10px;
	background-position: 0 -72px;
}

.fancybox-nav:hover span {
	visibility: visible;
}

.fancybox-tmp {
	position: absolute;
	top: -99999px;
	left: -99999px;
	visibility: hidden;
	max-width: 99999px;
	max-height: 99999px;
	overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
	overflow: hidden;
}

.fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background: url('../../image/codezeel/fancybox_overlay.png');
}

.fancybox-overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}

.fancybox-lock .fancybox-overlay {
	overflow: auto;
	overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
	visibility: hidden;
	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	position: relative;
	text-shadow: none;
	z-index: 8050;
}

.fancybox-opened .fancybox-title {
	visibility: visible;
}

.fancybox-title-float-wrap {
	position: absolute;
	bottom: 0;
	right: 50%;
	margin-bottom: -35px;
	z-index: 8050;
	text-align: center;
}

.fancybox-title-float-wrap .child {
	display: inline-block;
	margin-right: -100%;
	padding: 2px 20px;
	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
	background: rgba(0, 0, 0, 0.8);
	-webkit-border-radius: 15px;
	 -khtml-border-radius: 15px;
	   -moz-border-radius: 15px;
	        border-radius: 15px;
	text-shadow: 0 1px 2px #222;
	color: #FFF;
	font-weight: bold;
	line-height: 24px;
	white-space: nowrap;
}

.fancybox-title-outside-wrap {
	position: relative;
	margin-top: 10px;
	color: #fff;
}

.fancybox-title-inside-wrap {
	padding-top: 10px;
}

.fancybox-title-over-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 10px;
	background: #000;
	background: rgba(0, 0, 0, .8);
}

/*Product zoom CSS*/

.zoomContainer {
    margin-bottom: 5px;
}
/*.zoomContainer .zoomWindow{
	box-shadow:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	margin-left:10px;

}*/

/* FancyBox */

.toggle .mobile_togglemenu { 	
	display:block;
	cursor:pointer;
	width:100%;  
	margin-top: 0; 
	overflow: hidden;
	padding:0 0 15px;
	position: absolute;
	right: 0px;
    top: 10px;
}

.toggle {
    background: none;
    /*padding: 15px 0px;
	margin:0 auto;*/
}

#footer .mobile_togglemenu:hover	{ text-decoration:none;}

.toggle .mobile_togglemenu:before {	
	color: #ffffff;
	content: "\f107";
	font-family: "FontAwesome";
	font-size: 22px;
	font-weight: 400;
	height: 20px;
	margin: 0;
	position: absolute;
	right: 0px;
	text-align: center;
	top: 0px;
	width: 20px;
}
.active .mobile_togglemenu:before { 
	color: #ffffff;
	content: "\f106";
	font-family: "FontAwesome";
	font-weight: 400;
	height: 20px;
	margin: 0;
	position: absolute;
	right: 0px;
	text-align: center;
	top: 0px;
	width: 20px;
} 


/* Responsive menu Css Start */
.nav-responsive span { display:inline-block;}
.ie7 .nav-responsive span { display:inline;}
.nav-responsive { cursor:pointer; display:none; }
.main-navigation  ul  li{ list-style:none; position:relative;}
/* .nav-responsive .expandable{
	background: url(../../image/codezeel/sprite.png) no-repeat scroll -2px -120px;
	height: 25px;
	margin-top: 7px;
	width: 25px;	   
	float: left;
}  */
.responsive-menu {padding:0; position:relative;}
.responsive-menu .main-navigation{ 
	position:absolute; 
	z-index:99;  
	display:none; 
	margin-top:0px; 
	padding: 2% 2%;
	width: 100%; 
	list-style:none;
	left: 0px;
	top: 47px;
}
.responsive-menu .main-navigation ul{padding-left: 15px;}
.nav-responsive div,
.responsive-menu .hitarea {
	height: 0px;
	width: 0px;
	float: right;
	cursor: pointer;
	margin-right: 0px;
	margin-left: 0px;
}
.responsive-menu .hitarea{margin-left:0; }
.responsive-menu .expandable .collapsable-hitarea{ 
	height: 30px;		
	padding: 0;
	width: 25px;
	margin-top: 4px;
} 
.responsive-menu .expandable-hitarea { 
	height: 30px;
	width: 25px;		
	padding: 5px;
	margin-top: 4px;
} 
.responsive-menu .collapsable-hitarea { 
	height: 30px;
	width: 25px;
	padding: 5px;	
	margin-top: 4px;
} 
@media (max-width: 991px){
	.responsive-menu .main-navigation{margin-top:0px; border-top: 1px solid #ededed;}
}
@media (max-width: 767px){
	.responsive-menu .main-navigation {
		width: 100%;
     	left: 0;
	}
}
/* Responsive menu Css End */

OpenCart 3.0.3.8
www.wattstruckcenter.com/shop


User avatar
Active Member

Posts

Joined
Fri Nov 15, 2013 10:47 pm

Post by by mona » Wed Dec 07, 2022 12:48 am

The other way around should work the same

Code: Select all

.megamenu ul.list-unstyled li > a {
    min-width: 188px !important;
 }

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 by mona » Wed Dec 07, 2022 1:21 am

This believe should keep the effect.
I do not like (nor should you) write important but you can go through the css and edit that yourself to finding the offending code.

Code: Select all

#nav-one li .megamenu.column1 ul.list-unstyled > li.dropdown:hover > .dropdown-menu {
    padding:0  !important;
    border: 0 !important;
    border-left: 40px solid transparent !important;
}
#nav-one li .megamenu ul.list-unstyled li .dropdown-menu ul.list-unstyled li > a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
}
#nav-one li .megamenu ul.list-unstyled li .dropdown-menu {
    background-color:transparent !important;
}
.megamenu ul.list-unstyled li .dropdown-menu .dropdown-inner {
    background-color: #000 !important;
    min-width: 188px !important;
    padding: 20px !important;
}
.megamenu ul.list-unstyled li > a {
    min-width: 188px !important;
 }

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 rocketfoot » Wed Dec 07, 2022 4:44 am

Ok...I got the gap removed and added a border around the child menu items but I can figure out how to change the border color. Also, what could be causing the menu items to 'jump' when hovering down through the list?

OpenCart 3.0.3.8
www.wattstruckcenter.com/shop


User avatar
Active Member

Posts

Joined
Fri Nov 15, 2013 10:47 pm

Post by xxvirusxx » Wed Dec 07, 2022 6:15 am

Add the color..
Ex:

Code: Select all

border: 1px solid #333;

Upgrade Service | OC 2.3.0.2 PHP 8 | My Custom OC 3.0.3.8 | Buy me a beer


User avatar
Expert Member

Posts

Joined
Tue Jul 17, 2012 10:35 pm
Location - România

Post by by mona » Wed Dec 07, 2022 9:46 am

They did not jump until you added a border on hover ?

Obviously that will add a border on hover - what you presume is that means within the boundary - like adding a border of flowers in your garden - but that is an incorrect presumption. You would have to add a border and change the colour of it on hover.


Now that the topic is resolved please mark the topic as [solved] in the title.
New questions require new topics and topics should be restricted to opencart - Please be aware Paul was making the point earlier that this topic is considered outside the scope of free support -

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 rocketfoot » Wed Dec 07, 2022 6:55 pm

by mona wrote:
Wed Dec 07, 2022 9:46 am
They did not jump until you added a border on hover ?

Obviously that will add a border on hover - what you presume is that means within the boundary - like adding a border of flowers in your garden - but that is an incorrect presumption. You would have to add a border and change the colour of it on hover.


Now that the topic is resolved please mark the topic as [solved] in the title.
New questions require new topics and topics should be restricted to opencart - Please be aware Paul was making the point earlier that this topic is considered outside the scope of free support -
Thank you, Mona...your help, as always, is very much appreciated! I do fail to see the logic in starting a new topic for something directly related to the initial topic, but you guys are the experts! I do miss the days when you could post a topic, discuss it and find folks that enjoyed helping and teaching people like me that are not professional coders and devs! I just enjoy doing as much as I can on my own but I need help every now and then! I do pay the pro's to help when I am in over my head, but it used to be nice to have people eager to help and teach. Gone are the old days for sure.

OpenCart 3.0.3.8
www.wattstruckcenter.com/shop


User avatar
Active Member

Posts

Joined
Fri Nov 15, 2013 10:47 pm

Post by by mona » Thu Dec 08, 2022 2:53 am

You are welcome ;D

The purpose of the forum is for users to search questions and find answers. Opencart questions, i.e. you search google for “how to I add filters in Opencart” - theoretically no one need to ask again - if it has [SOLVED] in the titled the users is more easily able to find a solution. That is the theory anyway.

There is a great coding site Stackoverflow which also answers specific Opencart coding questions (often answered by one of the “old boys” you are talking about that used to be here). Anyway, the principle is the same - not to dilute the purpose of the site which is for the benefit of the community, not to replicate questions, not to allow the forum to morph into a social media forum - ie keeping it on topic builds a very useful forum - which stack overflow is.

As for why people are less helpful than they use to be - I think (and it is only my opinion) the answer to that is probably that in the “good old days” developers were supported better. Today the majority of people that come here (in my opinion) are marketing personal who sell websites and come here to ask for free how to code things for their paying clients. The other major issue is being asked to fix issues of developers who have been paid (or not) and are not here to assist. The third issue being we all have to make a living.

Here, we all have a bad day sometimes and we are not always nice to each other, which I think is a real shame - but we are the only ones here and the final insult is that it is presumed that we have nothing better to do, so our time is not valuable.

~ Happy Holidays

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 rocketfoot » Thu Dec 08, 2022 4:08 am

by mona wrote:
Thu Dec 08, 2022 2:53 am
You are welcome ;D

The purpose of the forum is for users to search questions and find answers. Opencart questions, i.e. you search google for “how to I add filters in Opencart” - theoretically no one need to ask again - if it has [SOLVED] in the titled the users is more easily able to find a solution. That is the theory anyway.

There is a great coding site Stackoverflow which also answers specific Opencart coding questions (often answered by one of the “old boys” you are talking about that used to be here). Anyway, the principle is the same - not to dilute the purpose of the site which is for the benefit of the community, not to replicate questions, not to allow the forum to morph into a social media forum - ie keeping it on topic builds a very useful forum - which stack overflow is.

As for why people are less helpful than they use to be - I think (and it is only my opinion) the answer to that is probably that in the “good old days” developers were supported better. Today the majority of people that come here (in my opinion) are marketing personal who sell websites and come here to ask for free how to code things for their paying clients. The other major issue is being asked to fix issues of developers who have been paid (or not) and are not here to assist. The third issue being we all have to make a living.

Here, we all have a bad day sometimes and we are not always nice to each other, which I think is a real shame - but we are the only ones here and the final insult is that it is presumed that we have nothing better to do, so our time is not valuable.

~ Happy Holidays
I mostly agree with you! But I do think forums are a media for discussion. I have found that many, many times my situation may be a little different than the [SOLVED] thread I may have found in Google or forum search...plus some are so old that they don't apply any longer. That could actually be dangerous to a website if a bad fix is applied to a incompatible version. I do see your point though! I also dabble in MyBB and Invision Community forum building and managing so I tend to favor lots of forum posts to help keep things active and interesting!

Happy Holidays to you too!

OpenCart 3.0.3.8
www.wattstruckcenter.com/shop


User avatar
Active Member

Posts

Joined
Fri Nov 15, 2013 10:47 pm
Who is online

Users browsing this forum: Bing [Bot] and 100 guests