user3636197 user3636197 - 2 months ago 10
CSS Question

Close of menu and icon image when click on another menu?

When click on Hamburg menu, the search menu should be closed and its icon should be of search not the cross and when clicking on search menu, the hamburg menu should be closed and icon convert to hamburg not remain cross.'

// Mobile/tablet navigation (clicks, taps)
$('.toggle-sm-nav, .js-toggle-sm-navigation').click(function(){

// Change button
$(this).children('span').toggleClass('glyphicon-align-justify icon-close-menu-cross2');

// Toggle menu on hamburger
$('.navcontainer').toggle();
$('.header-nav-container').toggleClass('brgropen');

if( $('.header-nav-container').hasClass('brgropen') ){
$('body').css('overflow', 'hidden');
} else {
$('body').css('overflow', 'visible');
}


Another Menu Search

Focus search field when opened

$('.js-toggle-xs-search').on('click', function(){
$('.sm-searchboxc input#search').trigger('touchstart');
});

Answer
       if ($('.xs-search > button > span').hasClass('icon-close-menu-cross2')) {
         $('.xs-search > button > span').removeClass('icon-close-menu-cross2').addClass('icon-search');
         $('.sm-searchboxc input#search').hide();
         $('.searchboxc').find('.site-search').removeClass('active');
       }
       $('.navcontainer').toggle();
       $('.header-nav-container').toggleClass('brgropen');
       if ($('.header-nav-container').hasClass('brgropen'))

         $('.js-toggle-xs-search').on('click', function() {
         var width = $(window).width();
         if (width <= 968) {
           if ($('.sm-searchboxc input#search').hide()) {
             $('.sm-searchboxc input#search').show();
           } else if ($('.xs-search > button > span').hasClass('icon-close-menu-cross2')) {
             $('.sm-searchboxc input#search').trigger('touchstart');
           }
           if ($('.header-nav-container').hasClass('brgropen')) {
             $('.toggle-sm-nav, .js-toggle-sm-navigation').children('span').toggleClass('glyphicon-align-justify icon-close-menu-cross2');
             $('.navcontainer').hide();
             $('.header-nav-container').removeClass('brgropen');
           }
         } else {
           $('.sm-searchboxc input#search').trigger('touchstart');
         }
       });
       $('.sm-searchboxc input#search').on('touchstart', function() {
             setTimeout(function() {
                   $('.sm-searchboxc input#search').focus();
Comments