Side menu children

[Swift Ideas – Ed]

Sorry, with a fresh pair of eyes I’ve realised that code didn’t change anything. However, this hopefully should! Just add this to the custom css panel within theme options:

.widget_nav_menu li.current-menu-item ul.sub-menu, .widget_nav_menu li.current-menu-ancestor ul.sub-menu {
display: inherit;
opacity: 1;
}

– Ed

[Kirsten]

I did and it didnt solve anything. On iPad in portrait mode it works all fine. Only in landscpae it doesn’t.

[Swift Ideas – Ed]

Is your custom css set up to work no matter what browser size? Seems that sub menus are hidden on iPad portrait no matter what?

– Ed

[Kirsten]

I just temporarely deleted all custom css. Then the menu in de sidebar is totally colapsed and still I cannot click on the menu items that have children. So it unfortunately has nothing to do with the custom customizations.

[Swift Ideas – Ed]

@Kirsten – what I meant was, can you make sure the CSS that you’ve added to only show sub menus on the current page is there, without media queries to hide it on certain resolutions – as there was CSS hiding the menu on iPad portrait.

– Ed

[Kirsten]

This all the css code:

.widget_nav_menu li.menu-item ul.sub-menu {
display: none;
}
div.sharedaddy, #content div.sharedaddy, #main div.sharedaddy {
margin-left: 60px;
}
.widget_nav_menu li.current-menu-item ul.sub-menu ,
.widget_nav_menu li.current-menu-ancestor ul.sub-menu {
display: inherit;
opacity: 1;
}

div.sf-countdown .countdown_section .amount_label {
opacity: 0.8;
}
div.sf-countdown .countdown_section amount{
color: #fff;
}

a.sf-button{max-width:400px !important}
.sf-list {
padding-left: 1.3em;
text-indent: -0.7em;
}

a.sf-button.red {
background-color: #d3301e;
color: #fff;
}
a.sf-button.red:hover {
background-color: #535757;
}
a.sf-button.red-light {
background-color: #ea5a2d;
color: #fff;
}
a.sf-button.red-light:hover, a.sf-button.orange:hover {
background-color: #535757;
}
.productsingle {
height: 100%;
width: 38%;
}
.element {
border: 1px solid #CCC;
}
.author-avatar {
margin-bottom: 50px;
}
.mini-list li .product-cats {
display: none;
}

ins {
background: none repeat scroll 0% 0% #fe9619;
text-decoration: none;
color: #fff;
margin-right: 10px;
}

aside.left-sidebar.sticky {
-webkit-transform: translateZ(0);
}

a.sf-button.orange {
background-color: #fe9619;
color: #FFF;
}

.sf-icon-box.sf-icon-box-standard {
border: 1px solid #ECEBE7;
}
.woocommerce div.product div.images {
width: 30%;
}
.woocommerce div.product div.summary {
width: 66%;
}
.woocommerce.widget .buttons a, .load-more-btn {
background: none repeat scroll 0% 0% #07c1b6;
color: #fff;
}
.woocommerce.widget .buttons a:hover, .load-more-btn {
background: none repeat scroll 0% 0% #f4f4f4;
color: #000;
}
small, .small {
font-size: 70%;
align: right;
}

div.sharedaddy, #content div.sharedaddy, #main div.sharedaddy {
margin-left: 40px;
}

ol {
margin: 0 0 20px 30px;
}

a.sf-button.pink {
background-color: #d3301e;
color: #FFF;
}

span.wpcf7-form-control-wrap {
margin-bottom: -20px;
}

#footer-widgets .widget {
padding-bottom: 10px;
}
#footer h6 {
margin-bottom: 15px;
}

h4.spb-heading, h3.spb-heading, h4.lined-heading {
padding-bottom: 20px;
}
.sidebar .widget-heading h4 {
margin-bottom: 5px;
}
.recent-posts-list li .recent-post-title {
padding-bottom: 5px;
}

.widget {
padding-bottom: 40px;
}
.woocommerce ul.products li.product .price, .woocommerce div.product p.price {
color: #fe9619;
}
#footer a {
padding-bottom: 4px;
}
.pricing-table-package {
font-size: 16px;
}
.pricing-table-wrap.bordered .pricing-table-price {
font-size: 14px;
}
.pricing-table-price {
font-weight: normal;
font-size: 24px;
}

.box-top {
margin-top: 75px;
}

.alt-bg {
border: 0px;
}

.sf-list li i {
color: #07c1b6;
}

ul.related-items, ul.post-pagination-wrap, .woocommerce .help-bar ul li {
list-style: none;
}
.sf-list li {
list-style: none !important;
}

.posted_in {
display: none;
}
.widget_product_categories ul {
color: #07c1b6;
}

body.login {
background: none repeat scroll 0% 0% #ecebe7;
}

.mini-list li .product-cats {
display: none;
margin-bottom: 0px;
}

.sf-list li i {
color: #07c1b6;
}

#showcoupon {
color: #fff;
}

.sidebar.right-sidebar {
padding-left: 10px;
}
.woocommerce .woocommerce-info, .woocommerce-page .woocommerce-info {
background: none repeat scroll 0% 0% #07c1b6;
color: #222;
}
.woocommerce .woocommerce-info, .woocommerce-page .woocommerce-info a {
color: #fff;
}
.woocommerce .woocommerce-message, .woocommerce-page .woocommerce-message {
background: none repeat scroll 0% 0% #07c1b6;
color: #fff;
}

ul {
font-size: 14px;
}

#top-header .th-right a:hover {
color: #07c1b6;
}
#top-header .th-left a:hover {
color: #07c1b6;
}

#top-header .th-left {
line-height: 10px;
}

#top-header .th-left, #top-header .th-left a {
color: #535757;
font-size: 11px;
}

#top-header .th-left .sf-icon {
color: #535757;
font-size: 18px;
}
#top-header .th-right > nav .menu li {
border-left: 1px solid #f2f2f2;
}

@media only screen and (max-width: 1200px) {

}
@media only screen and (max-width: 991px) {
.productsingle {
height: auto;
width: 100%;
}
#top-header{
display: block!important;
}
#top-header .th-left, #top-header .th-left a{
font-size: 13px;
line-height: 20px;
}
#top-header .th-right{
display: none;
}

.header-3 #header .is-sticky .sticky-header.sticky-header-resized.header-container, .header-4 #header .is-sticky .sticky-header.sticky-header-resized.header-container, .header-5 #header .is-sticky .sticky-header.sticky-header-resized, #header-section.header-6 #header.sticky-header.sticky-header-resized, .header-7 #header .is-sticky .sticky-header.sticky-header-resized .header-container {
margin-bottom: -20px;
}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
.widget_nav_menu-off li.menu-item ul.sub-menu {
display: block;
}

.widget_nav_menu-off li.current-menu-item ul.sub-menu ,
.widget_nav_menu-off li.current-menu-ancestor ul.sub-menu {
display: block;
}
}

@media only screen and (max-width: 767px) {

}
@media only screen and (max-width: 479px) {
body .woocommerce-shop-page ul.products li.product, body .product_list_widget > div > ul.products li.product {
width: 98%!important;
}
.woocommerce div.product div.images {
width: 98%;
}
.woocommerce div.product div.summary {
width: 98%;
}
.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
width: 100%;
height: auto;
}

.pricing-table-column {
border-left: 1px solid #E4E4E4;
}

table.sf-table td {
padding: 4px 8px;
}
#top-header .th-left, , #top-header .th-left a{
font-size: 13px;
}

}

But the problem is still there even without custom css

[Swift Ideas – Ed]

Sorry, my css code above was off, try this:

.widget_nav_menu ul.sub-menu {
opacity: 1;
}

– Ed

[Kirsten]

Hi that also didnt work but I think were solving a problem that’s not there with that piece of code so I made a video of the problem. As you can see in the video the pages that have children won’t load at all. Just for a second the blue beam on top of the page gives a second of loading time but it doesn’t stick.
Check it out:
https://www.dropbox.com/s/u3t0c5yfw5x1lpw/Video%2020-06-14%2016%2023%2010.mov

[Swift Ideas – Ed]

Sorry, I am on the right page with the issue, and after debugging further I hope this is the final fix!

Edit /js/functions.js line 812 from:

if (directDropdown.css('opacity') === 1

to

if (directDropdown.css('opacity') === '1' || directDropdown.css('opacity') === 1) {

That should, hopefully, be it.

– Ed

[Kirsten]

Thank you very much that did the trick!!
Will it be included in nexe update?

[Swift Ideas – Ed]

Great! Yes it will be 🙂

– Ed