Navigation – Clickable Arrow on mobile
-
I used the following code to make the parent menu of a drop-down menu clickable and I would like to have this work on mobile as well. Currently in the mobile version the parent menu is not clickable, it only opens the sub-menus. And next to the parent menu is an arrow, which unfortunately does nothing. My goal would be, that the arrow opens the sub-menu list and when you click the parent menu it goes to a separate side like on the desktop version.
function make_parent_menu_clickable() {
?>
<script>
(function($) {
$(window).on('load', function() {
var $wrapper = $('.jeg-elementor-kit.jkit-nav-menu');
$wrapper.find('li.menu-item-has-children > a').each(function() {
$(this).unbind();
console.log($wrapper)
$(this).on('click', function(e) {
if (($wrapper.hasClass('break-point-tablet') && window.matchMedia('(max-width: 1024px)').matches) || ($wrapper.hasClass('break-point-mobile') && window.matchMedia('(max-width: 768px)').matches)) {
e.preventDefault()
const dropdown = jQuery(this).next()
if (dropdown.hasClass('dropdown-open')) {
dropdown.removeClass('dropdown-open')
} else {
dropdown.addClass('dropdown-open')
}
}
})
});
})
})(jQuery)
</script>
<?php
}
add_action( 'wp_footer', 'make_parent_menu_clickable' );
Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
- You must be logged in to reply to this topic.