Hi there,
I need some pointers on an issue i'm having with a superfish responsive menu if someone could advise on what the issue is.
The issue is this, when the responsive menu dops down to reveal categories and sub categories which are revealed by toggling, there is a + symbol for the toggle which should then reveal the other sub-categories within the menu.
What tends to happen is the parent is activated unless you manage to hit the + toggle image with a pin prick, seems like the toggle is not allowing adequate click from your finger.
I enclose the superfish css code:
.nav-container { position: relative; z-index: 4; margin-top: 21px;}
.sf-menu {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b3b3b', endColorstr='#171717'); /*IE6-9 */
background: -webkit-gradient(linear, left top, left bottom, from(#3b3b3b), to(#171717));
background: -moz-linear-gradient(top, #3b3b3b, #171717); /*firefox 3.6+ */
background: -o-linear-gradient(top, #3b3b3b, #171717); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3b3b3b, #171717); /* IE10+ */
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.sf-menu > li {
float: left;
text-align: left;
position: relative;
border-right: solid 1px #474747;
border-left: solid 1px #000000;
z-index: 99;
}
.sf-menu > li.first{ border-left: none;}
.sf-menu > li.last{ border-right: solid 1px #000000;}
.sf-menu > li.last > a{ border-right: solid 1px #474747;}
.sf-menu li.parent {z-index: 999;}
.sf-menu li a {
display: block;
color: #fff;
text-decoration: none;
position: relative;
padding: 0;
text-transform: capitalize;
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
.sf-menu > li > a > span {
display: block;
font-size: 16px;
line-height: 17px;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
padding: 13px 20px 17px 19px;
}
.sf-menu li ul a span { white-space: normal;}
/*.sf-menu > li.parent > a:before { content: "\f103"; position: absolute; bottom: 0; width: 100%; text-align: center;}
*/
.sf-menu > li.sfHover > a,
.sf-menu> li > a:hover,
.sf-menu > li.active > a { color: #69bf30;}
.sf-menu li a:hover { text-decoration: none;}
.sf-menu ul {
position: absolute;
top: -999em;
z-index: 99;
width: 192px;
display: none;
background: #2d2d2d;
box-shadow:0 4px 8px rgba(0,0,0,0.12);
-moz-box-shadow:0 4px 8px rgba(0,0,0,0.12);
-webkit-box-shadow:0 4px 8px rgba(0,0,0,0.12);
}
.sf-menu li li { border-bottom-width: 0;}
.sf-menu li li.parent > a:before { content: "\f101"; float: right; }
.sf-menu li li.first{ padding-top: 15px;}
.sf-menu li li.last { border-bottom-width: 1px; padding-bottom: 15px;}
.sf-menu li li { position: relative; float: none;}
.sf-menu li li a {
display:block;
background: none;
font-size: 13px;
line-height: 15px;
color: #868686;
padding:6px 15px;
font-weight: bold;
}
.sf-menu li li > a:hover,
.sf-menu li li.sfHover > a,
.sf-menu li li.active > a { color: #ffffff; background: #3b3b3b;}
.sf-menu ul ul {
position: absolute;
top: -999em;
z-index: 99;
width: 192px;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0px;
top: 47px;
/* match top ul list item height */
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 193px;
/* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 193px;
/* match ul width */
top: 0;
}
@media only screen and (min-width: 992px) {
#menu-icon,
.sf-menu-phone,
.sf-menu-block { display: none !important;}
}
@media only screen and (max-width: 991px) {
.sf-menu,
.sf-menu-phone {display: none;}
/* menu icon */
.sf-menu-block {display: block; position: relative;}
#menu-icon {
display: block;
font-size: 16px;
line-height: 21px;
cursor: pointer;
text-transform: uppercase;
padding: 0 20px;
height: 51px;
line-height: 51px;
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b3b3b', endColorstr='#171717'); /*IE6-9 */
background: -webkit-gradient(linear, left top, left bottom, from(#3b3b3b), to(#171717));
background: -moz-linear-gradient(top, #3b3b3b, #171717); /*firefox 3.6+ */
background: -o-linear-gradient(top, #3b3b3b, #171717); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3b3b3b, #171717); /* IE10+ */
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
#menu-icon:before {content: "\f055"; font-size: 25px; line-height: 50px; float: right; }
#menu-icon.active:before { content: "\f056"; }
.sf-menu-phone {
background: #2d2d2d;
border-top: 0;
position: absolute;
z-index: 2;
width: 100%;
moz-box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.sf-menu-phone li { position: relative; }
.sf-menu-phone > li { font-size: 13px; }
.sf-menu-phone > li.last {border-bottom: 0;}
.sf-menu-phone li a { display: block; color: #868686; font-weight: bold; padding: 10px 20px; }
.sf-menu-phone li a:hover { background: #3b3b3b; color:#fff; }
.sf-menu-phone li li {font-size: 13px; padding: 0 15px; }
.sf-menu-phone li li.last {padding-bottom: 10px;}
.sf-menu-phone li li:first-child {padding-top: 10px;}
.sf-menu-phone li li:first-child strong {top:10px;}
.sf-menu-phone li strong {
position: absolute;
display: block;
top: 4px;
right: 5px;
width: 24px;
font-size: 16px;
line-height: 16px;
text-align: center;
}
.sf-menu-phone > li > strong {top: 9px; right: 18px; font-size: 20px; line-height: 20px;}
.sf-menu-phone li strong:hover { cursor: pointer; }
.sf-menu-phone li strong:before {content: "\f067"; }
.sf-menu-phone li strong.opened:before { content: "\f068"; }
/* dropdown */
.sf-menu-phone ul { width: auto; margin:10px 0 0 0 ; display: none; }
.sf-menu-phone > li.active > a > span {color: inherit;}
.sf-menu-phone > li.active > a,
.sf-menu-phone > li > a:hover { }
.sf-menu-phone li li.active > a,
.sf-menu-phone li li a:hover {}
}
@media only screen and (max-width: 767px) {
.sf-menu-block {margin: 0px;}
}
Also I include an image of the drop down menu.
Thanks in advance