Без рубрики

Готовится к выпуску

Событие контакт форм 7

Ускорение загрузки страницы с видео ю-туб

Две раздельные страницы регистрации

Всегда мобильное меню WordPress Bootsrap

 

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()
 });

});

4. Update
5. 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.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *