How do you switch the down state of image based navigation based on media size?

CMS & WordPress
1

I am converting a site into WordPress. The site has image based navigation with rollover buttons and a down state when you are on the current page. The site is here http://thecellarsisters.ca/sisterswp/ - click on “About” and the cork down state stays on. I have this working perfectly, as you can see. CSS is used to change the hover state and CSS in the page template puts the nav button into the down state.

Now my problem is with responsiveness. When you resize the browser window I have replaced the nav images with smaller images once you are below 680px. But how do I then switch the down state button from the larger one to the smaller one? I’m thinking that this requires two javascripts. Your Craig Buckler of OptimalWorks.net script for screen width detection will give you the browser width once you move it, but when you first load the page it says “unknown” because it hasn’t been moved yet. I would almost need to combine his script with an instant detection. Then I need to create an if statement in javascript that will implement the correct CSS - if that’s even possible.

I was trying to do something like this but it doesn’t work because I need to convert the $sizer code to a string.

<?php 
$sizer = '<div id="menu">unknown</div>'.toString();

$test =  'less than 680 pixels';
if ($sizer == $test){
  <style>
    li#menu-item-28 a {
     background-image:url('http://thecellarsisters.ca//sisterswp/wp-content/themes/sisters/images/nav_about_on15.jpg');
</style>
}  else {
   li#menu-item-28 a {
   background-image:url('http://thecellarsisters.ca//sisterswp/wp-content/themes/sisters/images/nav_about_on.jpg');
  }
 }
}
?>

Even if that worked it doesn’t cover the current browser width when the page is loaded.

This seems incredibly complex for what must be something that has been commonly implemented. I can find plugins for nav images but nothing that will then replace each page’s image with the smaller down state image for mobiles.

Any ideas about how to do this?

Thanks
Charles