I'm trying to create a menu bar on the side of my webpage that when a screen is a certain size it opens the menu up from the right by a certain amount.

• If the screen is greater than 600 but less that 992, then it opens 250px.

• If the screen is less that 600, then it opens at 100%.

So far I can get the JS to work by itself - but then I try to use 'if($(window).width() >= 600) {}' then none of it works (I have a button to open - but it loses its functionality with the below code.

Below is my initial working;

if($(window).width() >= 600) {
  function openNav() {
    document.getElementById("myMenu").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  }
  function closeNav() {
    document.getElementById("myMenu").style.width = "";
    document.getElementById("main").style.marginLeft= "0";
    document.body.style.backgroundColor = "white";
  }
}

if($(window).width() < 600) {
  function openNav() {
    document.getElementById("myMenu").style.width = "100%";
    document.getElementById("main").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  }
  function closeNav() {
    document.getElementById("myMenu").style.width = "";
    document.getElementById("main").style.marginLeft= "0";
    document.body.style.backgroundColor = "white";
  }
}

I know that individually these work - but will work with all screen sizes.

  function openNav() {
    document.getElementById("myMenu").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  }
  function closeNav() {
    document.getElementById("myMenu").style.width = "";
    document.getElementById("main").style.marginLeft= "0";
    document.body.style.backgroundColor = "white";
  }