Navigation menu not working when in mobile mode

[tapan1]

Hi,

I am using a navigation menu on my webiste and though it works on pc etc, it is not working properly when viewing the site in mobile mode / mobile. The menu shrinks properly and menu button with fa-bars also show up, but clicking on the bars don’t show the menu.

Can anyone help as to what is wrong with it ? I have tried alot but I am not able to get my head around it.

You can check the website here: http://rtifed.com/template/

Any help will be appericiated.

Thanks in advance.

[PaulOB]

@tapan1

Any help will be appericiated.

That code is quite complex and I assume you have adapted from a template and lost some function on the way. You probably should go back to the documentation and see where you went wrong rather than throwing fixes at the issue.

Looking at the CSS it looks like the menu is toggled open using a class called wsoffcanvasopener but all I can see is that you toggle a class called wsactive on the body which doesn’t seem to do anything.

If I change your wslidemenu js to include toggling the aforementioned class:

e.g. Here in this section.

  jQuery('#wsnavtoggle').click(function () {
      jQuery('body').toggleClass('wsactive');
      jQuery('.wsmenucontainer').toggleClass('wsoffcanvasopener'); 
    });

    jQuery('.overlapblackbg').click(function () {
      jQuery("body").removeClass('wsactive');
      jQuery('.wsmenucontainer').removeClass('wsoffcanvasopener'); 
    });

With that code in place the side menu toggles open and will close but it seems your overlay is on top of the menu so that needs sorting out.

However, I believe that this may be the wrong approach as I’m sure that menu was supposed to work properly from the start and you should refer to the documentation or original template to see what you have changed.

You do have other issues at various screen sizes which will also need to be worked on.