Always mobil meny

Hello dear developers! I’am in love with your themes! Thank you for your work!
Can you help me please? How can I make menu to be always mobil, so it always as hamburger?

Thank you.

My site starvideogift.com

Hello there,

In order to accomplish such that objective, please 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

jQuery(function($) {

 var	menuType = 'desktop';

 $(window).on('load resize', function() {
   var currMenuType = 'desktop';

   if ( matchMedia( 'only screen and (max-width: 9999px)' ).matches ) {
     currMenuType = 'mobile';
   }

   if ( currMenuType !== menuType ) {
     menuType = currMenuType;

     if ( currMenuType === 'mobile' ) {
       var $mobileMenu = $('#mainnav').attr('id', 'mainnav-mobi').hide();
       var hasChildMenu = $('#mainnav-mobi').find('li:has(ul)');

       $('#header').find('.header-wrap').after($mobileMenu);
       hasChildMenu.children('ul').hide();
       hasChildMenu.children('a').after('<span class="btn-submenu"></span>');
       $('.btn-menu').removeClass('active');
     } else {
       var $desktopMenu = $('#mainnav-mobi').attr('id', 'mainnav').removeAttr('style');

       $desktopMenu.find('.submenu').removeAttr('style');
       $('#header').find('.col-md-10').append($desktopMenu);
       $('.btn-submenu').remove();
     }
   }
 });

 $('.btn-menu').on('click', function() {
   $('#mainnav-mobi').slideToggle(300);
   $(this).toggleClass('active');
 });

 $(document).on('click', '#mainnav-mobi li .btn-submenu', function(e) {
   $(this).toggleClass('active').next('ul').slideToggle(300);
   e.stopImmediatePropagation()
 });

});


  1. Update
  2. Add the below extra CSS code to Appearance > Customize > Additional CSS from dashboard.

#mainnav {
  display: none;
}

.btn-menu {
  display: block !important;  
}

If site caching applied, you should clear it before reloading your site. Otherwise, the changes won’t take affect.

Regards,
Kharis

Urrra! Thank’s a lot! It works amasing!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Dear, Kharis!
I have some problem with my menu. It falls down and lifts up immediately without stopping. Can you help me, please?

Thank you.

I switched off all plugin, but it wouldn’t help(((

In the code I’ve shared, remove this code block:


$('.btn-menu').on('click', function() {
 $('#mainnav-mobi').slideToggle(300);
 $(this).toggleClass('active');
});

$(document).on('click', '#mainnav-mobi li .btn-submenu', function(e) {
 $(this).toggleClass('active').next('ul').slideToggle(300);
 e.stopImmediatePropagation()
});

Regards,
Kharis

Thank you very much. It works perfectly!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

This is brilliant but is there a way to add “Menu” text next to the hamburger button?

Thanks

To accomplish it, try adding this jQuery code to Appearance > Custom JavaScript.


jQuery(function($) {

  $('.btn-menu').html('<span>Menu</span>');

});

Regards,
Kharis

thank you so much @kharisblank i have applied all changes but menu is not visible how can i make it visible or change its default color?
my site link
http://www.pandawhite.com/

Hello there,

Please try adding this custom CSS code:

    .btn-menu {
      color: #000;
    } 

Regards,
Kharis

thanx for fast reply that is working, how can i move menu little up?

You’re welcome! Please try this code:

    .btn-menu {
       margin-top: -30px; 
    }

Or you can merge it with the previous style for simplicity reason – so it’ll look like this:

    .btn-menu {
       color: #000;
       margin-top: -30px; 
    }

Regards,
Kharis

Its working thanks .

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi There

I have tried adding this to the custom CSS but the menu does not change to the hamburger menu, like the tread suggests it should do??

Please can you help

Steve B

Hello Steve,

Please provide us a link of your website here, so we can have a look.

Regards,
Kharis