Slider Menu – keep active items open

[Ashley Bassett]

Hello and Happy New year!

I’m using the slider them with the vertical menu on the left. All is working nicely (so far) except that I’d like to keep active items open.

I did fine a snippet a while back but the issue is that this assumes that there is only ONE sub-menu per parent. I have three levels, therefore all the sub menus open on the parent.

.main-navigation .main-nav .current-menu-item .sub-menu,
.main-navigation .main-nav .current-menu-ancestor .sub-menu {
opacity: 1;
left: auto;
right: auto !important;
position: relative;
width: 100%;
clear: both !important;
top: auto;
float: none;
visibility: visible;
pointer-events: auto;
height: auto;
display: block;
}

.current-menu-item .dropdown-menu-toggle,
.current-menu-ancestor .dropdown-menu-toggle {
display: none;
}

I’ve looked at options of using JQuery in the header to try and add a class to the parent ul (.sub-menu) but can’t get this to work. Is there an easier solution to select the only the sub-menu that has an active child to remain open?

Thanks and look forward to hearing back.

Ashley

[Ashley Bassett]

Further to this, I’ve tried the following JS

(edited)

<script>

jQuery(document).ready(function() {
jQuery(‘.current-menu-item’).each(function() {
jQuery(this).parent(‘ul’).addClass(‘sub-menu-active’);
});
});
</script>

This works in using JSFiddle but I can’t seem to get the results in my site to generate the additional class to add to the above.

Any ideas?

[David]

Hi there,

Happy New Year 🙂 Can you provide a link to your site so we can take a look?
You can edit your original topic and use the Site URL field to share the link privately.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ashley Bassett]

Sorted!

The issue was incorrect use of jQuery and $ in the code.

Hopefully this will help someone else with their accordion menus – where more than one sub-menu is being used – will add a class to the active sub-menu.

[David]

Awesome – thanks for sharing 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts