Safari Ignoring Javascript Media Query

Question

I have a nav bar which opens to 70px in height above 643px in width or 100% height below it. Here is the javascript:

function openNav() {
  document.getElementById('myNav').style.height = '70px';
  document.getElementById('myNav').style.opacity = '100%';
}

function closeNav() {
  document.getElementById('myNav').style.height = '0%';
  document.getElementById('myNav').style.opacity = '0%';
}
if (screen.width <= 643) {
    function openNav() {
  document.getElementById('myNav').style.height = '100%';
  document.getElementById('myNav').style.opacity = '100%';
}

function closeNav() {
  document.getElementById('myNav').style.height = '0%';
  document.getElementById('myNav').style.opacity = '0%';
}
}

I know this javascript is functioning properly, as it works on different browsers on desktop and mobile devices. In Safari, however, this media query is being ignored and it opens to 100% height all the time (both on desktop and mobile devices).

I have also attempted to use window.matchMedia, including the solution given here: Safari ignore window.matchMedia

I have not had any success in getting this to work on Safari.

If you want to see it in action, this is the site I'm working on: https://jh-portfolio-test-2.blogspot.com/

Safari Ignoring Javascript Media Query

0 Answers0