移动屏幕上的菜单按钮不可点击 wordpress 店面主题

Question

I am having a trouble in my wordpress ecommerce store and I am not able to trace out the bug.

My wordpress website has a menu on top and it is working fine in web browser, but when I am Opening in mobile screen it becomes a Menu Button, which is not clickable .Please someone help me to make it clickable in order to show dropdown menu items.

Wordpress Theme: Storefront

website Link: https://www.nuttynuts.pk/

Answer 1

If I look at your code, the mobile menu with the class of handheld-navigation does have the in the CSS a max-height: 0 . Clicking the button does not change this, so you are missing the javascript function to handle this. You can do it by toggling a class.

In your css file, add a class and give it the max-height:

.my_custom_class { max-height: auto !important; }

And with javascript (using jquery), you toggle this class on click on the button:

( function( $ ) {
    $(document).ready(function () {
      $(".menu-toggle").click(function (e) {
        e.preventDefault();
        $(".handheld-navigation").toggleClass("my_custom_class ");
      });
    });
}( jQuery ) );