Basculer la navigation uniquement sur les plus petits écrans

Question

J'ai un menu qui s'affiche dans son intégralité sur des écrans plus grands. Toutefois, pour les écrans entre 1024px et 1400px, je souhaite masquer les icônes sociales qui font partie de ce menu et ne les afficher que sur un clic de bouton. Cela fonctionne très bien, mais après avoir cliqué sur le bouton qui les affiche si je redimensionne la fenêtre à une taille plus grande, les boutons ne s'affichent plus. Idéalement, lorsque l'écran est entre 1024px et 1400px, le bouton expand social icons s'affichera, ce qui me permet de voir mon bouton social en cliquant sur ce bouton, mais lorsque je redimensionne la fenêtre, il doit masquer automatiquement le bouton expand social icons tous, mais après avoir cliqué sur le bouton étendre les icônes sociales, puis redimensionnant la fenêtre à un écran plus grand les boutons sociaux ne s'affichent pas.

Ceci est mon code jquery bascule:

jQuery.fn.clickToggle = function (a, b) { 
    function cb() { 
    [b, a][this._tog ^= 1].call(this); 
    } 
    return this.on("click", cb); 
}; 

$(".header-social-trigger").clickToggle(function() { 
    $('.header-social').css("cssText", "display: table-cell!important"); 
    $('.dg-button, .mnr-header-button').css("cssText", "display: none"); 
    $('.header-social-trigger .icon').removeClass("ion-android-share-alt"); 
    $('.header-social-trigger .icon').addClass("ion-close"); 
}, function() { 
    $('.header-social').css("cssText", "display: none"); 
    $('.dg-button, .mnr-header-button').css("cssText", "display: table-cell"); 
    $('.header-social-trigger .icon').removeClass("ion-close"); 
    $('.header-social-trigger .icon').addClass("ion-android-share-alt"); 
}); 

J'ai créé un violon qui illustre la question que je vis ici https://jsfiddle.net/v5bgp389/18/. Comment pourrais-je faire en sorte que le code ignore le code à bascule et affiche tous les boutons sur les plus grands écrans?

Answer 1

/*Change Css*/ 
     @media screen and (max-width: 1024px) { 
      .header-social-trigger { 
       display: table-cell !important; 
       background-color: #e0771a !important; 
       border-left: 0 !important; 
      } 

       .header-social-trigger:hover { 
        background-color: #f1811e !important; 
       } 

      .header-social { 
       display: none !important; 
      } 
     } 

    @media screen and (min-width: 1024px) { 
      .header-social-trigger { 
       display:none !important; 
       background-color: #e0771a !important; 
       border-left: 0 !important; 
      } 

       .header-social-trigger:hover { 
        background-color: #f1811e !important; 
       } 

      .header-social { 
       display: table-cell !important; 
      } 
     } 

Answer 2

quelque chose comme:

if($(window).width() > 1024 && $(window).width() < 1400){ 
    //screen width between 1024 and 1400px 
} 
else{ 
    //other screen sizes 
} 

?