Megamenu should open on click and not on hover

I am trying to make these mega navigation menu items be opened on click rather than hover. Could you help me with some custom code that could do it? Thank you!

  • Nahid

    Hey Andrew !
    Hope you are having a great day!

    Nahid here, following up from our last Live Chat session. Could you try adding the following code in a mu-plugin?

    <?php
    add_action('wp_head', 'megamenu_click_open');
    function megamenu_click_open() {
    	echo "<script>
    		(function($) {
    			$( document ).ready(function() {
    				$('.wsmenu-list > li').click(function(){
        					$(this).toggleClass('open');
    				});
    			});
    		})( jQuery );
    	</script>
    	<style>
    		.wsmenu-list li:hover>.megamenu {
        			display: none !important;
    		}
    		@media only screen and (min-width: 781px) {
    			.wsmenu-list > li.open > .megamenu {
        				display: block !important;
    			}
    		}
    	</style>";
    }

    This'll require you to paste the mentioned code in a PHP file that ends with the extension .php, e.g. "anyname.php". The mentioned code must have a "<?php" definition at the start of the file. This PHP file should be placed in {your root WordPress folder}/wp-content/mu-plugins (you'll need to create the folder named "mu-plugins" if it is not there already).

    Hope this helps. Let us know if this works for you. Thanks!

    Kind regards,
    Nahid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.