I am using the Bootstrap .nav-tab class on a navigation list. I want to change it to a .nav-pill class under the 600px Media Query.

I got the classes each to load depending on the window width.

Now I'm shooting for pretty - I want the change to fire on the resize event.

I figured out how to get the classes to switch when I resize from wide to 600px, I cannot get it to go back.

Any suggestions?

Here is a link to my prototype:
http://www.craigwebbart.com/csw/link...ss_test_01.htm

Here is the JavaScript code that I have so far:

Code:
<script type="text/javascript">
if (window.matchMedia("(max-width: 600px)").matches) {
  /* the view port is at less than 600 pixels wide */
$("#myTab").addClass("nav-pills")
} 
else {
  /* the view port is more than 600 pixels wide */
$("#myTab").addClass("nav-tabs");
};

window.onresize=function(){
	if (window.matchMedia("(max-width: 600px)").matches) {
  /* the view port is at less than 600 pixels wide */
$("#myTab").addClass("nav-pills")
}
 else {
  /* the view port is more than 600 pixels wide */
$("#myTab").addClass("nav-tabs");
}
};
</script>
Thank you in advance for any help.