CODEWITHSUNDEEP
javascriptjqueryhtmlcssmedia-queries
user9437856
user9437856

Reputation: 2388

How to hide the menu in mobile on click on the menu item?

I have a one-page website. I have a menu with the smooth scroll. When the user clicks on service then it will target the service section with the smooth scroll. There is no issue on the desktop.

Let's talk about mobile

In mobile, Menu is displaying like below

enter image description here

When I click hamburger icon then it's displaying like this enter image description here

Now the issue is in the smooth scroll. When I click on service then it's targeting the service section with smooth scroll but the menu is still shown on the mobile.

I have to hide the menu when I click on the menu.

You can check my [code here][3] https://jsfiddle.net/vqpyt5co/

Upvotes: 0

Views: 326

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Added the following code to trigger click event of closing the dropdown.

if ($(".x_mark_img").is(":visible")) {
    $(".x_mark_img").click();
}

See updated fiddle

$(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
        if ($(".x_mark_img").is(":visible")) {
            $(".x_mark_img").click();
        }
          $('html, body').animate({
            scrollTop: target.offset().top-80
          }, 1000);
          return false;
        }
      }
    });
  });

Upvotes: 1

Related Questions