Hamburger menu is not closing if I click on the screen

I love the Sydney theme. It looks pretty cool.
But there is a problem I’m facing with the Hamburger menu.

In the Mobile view or Tablet view, the hamburger menu is only closing if I click on top of it, not outside of it on the screen.

Is there any way to do it?

appreciate your help.
Sam

Hello Sam,

Try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

      'use strict'

      $('.btn-menu').remove().clone().prependTo('.site-header .col-md-8').removeClass('btn-menu').addClass('btn-menu-2');

      $('.btn-menu-2').on('click', function() {
        var navBlock = $('#mainnav-mobi');

        if (navBlock.is(':visible')) {
            navBlock.slideUp();
            $(window).off( 'slideMenuOpen' );
            $(this).removeClass('active');
        } else {
            navBlock.slideDown(300, function(){
              $(window).trigger('slideMenuOpen');
            });
            $(this).addClass('active');
        }

      });

      $(window).on('slideMenuOpen', function() {

        $('.site').click(function(){
          $('#mainnav-mobi').slideUp();
          $(window).off( 'slideMenuOpen' );
        });

        
        $('.btn-menu-2, #mainnav-mobi').click(function(event){
          event.stopPropagation();
        });

      });

    })(jQuery);
  1. Update

Regards,
Kharis

Hi Kharis,

Thanks for the code.
I have installed the plugin and insert the code as you suggested but after I update it, the whole hamburger menu got disappeared.
You could see it your self: https://www.techtontro.com/

Please help me out with this.

Sam

Hello Sam,

I am sorry, I missed one thing – I posted it to soon. Keep that code remains there. Then add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .btn-menu-2 {
      display: none;
      float: right;
      font-size: 28px;
      font-family: "FontAwesome";
      color: #fff;
      text-align:center;
      width: 28px;
      height: 28px;
      cursor: pointer;
      -webkit-transition: all 0.3s ease-out;
         -moz-transition: all 0.3s ease-out;
          -ms-transition: all 0.3s ease-out;
           -o-transition: all 0.3s ease-out;
              transition: all 0.3s ease-out;
    }
    .btn-menu-2:before{
      content: "\f0c9";
    }
    @media only screen and (max-width: 1024px) {
      .btn-menu-2 {
        display: block;
      }
    } 

Afterwards, you’d need to clear all applied cache, as it usually blocks recent code addition to take immediate effect. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

Hi Kharis,

Thanks for sharing the code.
Now it is working. But another problem arises.
my previous hamburger menu got dissappeared and the new menu appears. The Leveling between the LOGO and the menu also changed.
I’m sharing with you my previous code.

    @media only screen and (min-width:992px){
      
      .btn-menu{
        margin-top: -25px;
      }
      
      .site-header .col-md-8{
        margin-top: -10px; 
      } 
      
    }

    @media only screen and (max-width:991px){
      
      #masthead.site-header{
        background-color: transparent !important;
        height: 83px !important;
        padding: 5px 0 !important;
      } 
      
      #masthead.site-header.float-header{
        height: 53px !important;
        padding: 10px 0 !important;
        background-color: rgba(0,19,79,0.9);
      }
      
      #masthead.site-header.fixed {
        position: fixed !important;
      } 
     
      .site-header .col-md-8{
        width: 100%;
        margin-top: -25px;
      }  
      
    }

    @media only screen and (max-width:767px){
      
      .site-header{
        height: 70px;
      }
      
      .header-wrap{
        text-align: left;
      }
      
      .btn-menu{
        margin-right: 15px;
        margin-bottom: 30px;
        margin-top: -10px;
        color: #D3D3D3;
      }
      
    }

Please let me know if you could suggest something.

Hello there,

Not really sure what becomes the issue in there. Could you please take a screenshot and put some descriptive annotations to help easier figure it out?

Regards,
Kharis