CODEWITHSUNDEEP
javascriptcss
Collin
Collin

Reputation: 1

Targeting the @media section of stylesheet with JS

I am working on a basic responsive menu that, when the screen size is 600px or less, becomes an expandable side menu. I wrote these two basic JS functions to control it:

function openNav() {
document.getElementById('nav-right').style.width = '100%';
document.getElementById('nav-main').style.display = 'flex';
document.getElementById('menu-btn').style.display = 'none'};

and

function closeNav() {
document.getElementById('nav-right').style.width = '0';
document.getElementById('nav-main').style.display = 'none';
document.getElementById('menu-btn').style.display = 'block';}

The problem is that, once these functions are activated, these styles carry over when the screen size is increased again. Is there a way to make these disappear once the screen size is over 600px? Total newbie here, so any advice is appreciated.

Upvotes: 0

Views: 35

Answers (1)

Daniel Beck
Daniel Beck

Reputation: 21485

You don't need javascript here.

.nav-right{width:0}
.nav-main{display:none}
.menu-btn{display:block}

@media only screen and (max-width: 600px) {
  .nav-right{width:100%}
  .nav-main{display:block}
  .menu-btn{display:none}
}

Upvotes: 2

Related Questions