title: Change a selected buttons icon based on screen size
body: <p>I'm building a responsive website and need the navigation icons to change depending on the screen size. </p>
  
  <p>The navigation bar is pretty much finished now, and the images do change.. but their is a small issue that i'm having, which i replicated in this <a href="http://jsfiddle.net/Bundaberg/F3X6k/12/" rel="nofollow">fiddle</a>.</p>
  
  <p>Slide the viewport back and forward to see the icons change (i used tinyurl to compress the link, so they'll load a fraction slower.)</p>
  
  <p>So the problem! All focus should be placed on the 'cross' which appears if you click the button (with a screen size less than 600px.)</p>
  
  <p>The cross disappears when the screen viewport is resized above 600px which is good. However! It does not reappear if viewport is scaled back down again. </p>
  
  <p>The only way to get it back is to click the button off and on.</p>
  
  <p>In theory i would be using multiple images for different screen sizes.. but just using one here to keep it simple. </p>
  
  <p>As you can see i've already got a blue and grey image to change depending on the screen size.. but the issue is with getting the selected button to do the same.</p>
  
  <p>Here is the Jquery </p>
  
  <pre><code>$(window).resize(function () {
      if (matchMedia('only screen and (max-width: 600px)').matches) {
          $('#settings_button').css({
              "background-image": "url(http://tinyurl.com/oydwfm9)"
          });
      }
      if (matchMedia('only screen and (min-width: 601px)').matches) {
          $('#settings_button').css({
              "background-image": "url(http://tinyurl.com/nszbfxl)"
          });
      }
  });
  
  $(document).ready(function () {
  
      $("#settings").hide();
  
  
      $("#settings_button").click(function (e) {
          if (matchMedia('only screen and (max-width: 600px)').matches) {
              e.stopPropagation();
              $("#settings").toggle();
  
              if ($('#settings').is(":visible")) {
                  $('#settings_button').css({
                      "background-Color": "darkred",
                          "background-image": "url(http://tinyurl.com/odrbvwa)"
                  });
              };
              if ($('#settings').is(":hidden")) {
                  $('#settings_button').css({
                      "background-Color": "",
                          "background-image": "url(http://tinyurl.com/oydwfm9)"
                  });
              };
          }
      });
  
      $("#settings_button").click(function (e) {
          if (matchMedia('only screen and (min-width: 601px)').matches) {
              e.stopPropagation();
              $("#settings").toggle();
  
              if ($('#settings').is(":visible")) {
                  $('#settings_button').css({
                      "background-Color": "darkred"
                  });
              };
              if ($('#settings').is(":hidden")) {
                  $('#settings_button').css({
                      "background-Color": ""
                  });
              };
          }
      });
  });
  
  $(document).on("click", function (e) {
      $("#settings").hide();
  
      if ($('#settings').is(":hidden")) {
          $('#settings_button').css({
              "background-Color": "",
                  "color": ""
          });
      };
  });
  
  $("#settings").on("click", function (e) {
      e.stopPropagation();
  });
  </code></pre>
  
  <p>Any ideas? Thanks</p>