Question 176898 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can I close a WordPress hamburger menu after an anchor is clicked?

I am sorry if this question has been asked a thousand times but I am not a coder more a designer. I am developing a one page site for my business with a hamburger menu that opens to cover the page. I have anchor links to the different sections. I got the code from different tutorials online but have one problem. How do I get the menu to close when the user clicks on the anchor link? I know there is a bit of JS code that I need to add but I can’t figure out how.
I am using WordPress with the DIVI theme.

This is the code that I have added to my slide in menu.

jQuery(function($) {
  $('#slide-in-open').click(function() {
    $(this).toggleClass('open');
    $('.slide-in-menu-container').toggleClass('slide-in-menu');
  });
});
#slide-in-open {
  cursor: pointer;
}

.line {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #EA5B13;
  border-radius: 9px;
  opacity: 1;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}

.line-2 {
  background: #96315c;
  top: 10px;
}

.line-3 {
  background: #65186A;
  top: 20px;
}

#slide-in-open.open .line-1 {
  top: 10px;
  background: #EA5B13;
  right: 40%;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#slide-in-open.open .line-2 {
  top: 10px;
  background: #96315c;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#slide-in-open.open .line-3 {
  top: 10px;
  background: #65186A;
  left: 40%;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.slide-in-menu {
  right: 0 !important;
  opacity: 1 !important;
}

.slide-in-menu-container {
  -webkit-transition: all 0.05s ease !important;
  -moz-transition: all 0.05s ease !important;
  -o-transition: all 0.05s ease !important;
  -ms-transition: all 0.05s ease !important;
  transition: all 0.05s ease !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Tags:

2

Answers


  1. 0

    You can use this code:

    jQuery(function($) {
  $('#slide-in-open').click(function() {
    $(this).toggleClass('open');
    $('.slide-in-menu-container').toggleClass('slide-in-menu');
  });
  // For the anchor link
  $('ul.menu li a').click(function() {
    $('#slide-in-open').removeClass('open');
    $('.slide-in-menu-container').removeClass('slide-in-menu');
  });
});

    Screen grab of the inspector

    Login or Signup to reply.
  2. 0

    $(el).click(function(){...}) is deprecated

    use $(el).on('click', function(){...}) instead

    source: api.jquery.com/click-shorthand/

    otherwise, it should work.
    unless there is an issue with the html markup, but you haven’t posted any html so we can’t know.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search