Media response query not being recognized

Question

I'm trying to have a hamburger menu on smaller devices. On laptop and desktops I'd like a static menu on the left. As of right now none of my media queries are being recognized. When I'm on a screen smaller than 438 nothing happens. I don't get a hamburger menu for smaller screens and my navigation bar is fixed to the left at ALL times. I'm using codepen and chrome.

HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="nav">
<nav id="navbar">
   <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
  <div class="header">
    <a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
  <header><h1>JS Data Structures</h1></header>
  </div>
  <div id="nav-links">
    <a class="nav-link" href="#introduction" rel="internal">Introduction</a>
    <a class="nav-link" href="#arrays" rel="internal">Arrays</a>
    <a class="nav-link" href="#array_methods" rel="internal">Array Methods</a>
    <a class="nav-link" href="#.filter()" rel="internal">.filter()</a>
    <a class="nav-link" href="#.reduce()" rel="internal">.reduce()</a>
  </div>
</nav>
</div>
<main id="main-doc"></main>

CSS:

#nav{
position: relative;
  }
.header{
    display:flex;
    align-items: center;
    flex-direction: row;
    height:100%;
    border-bottom:1px solid;
  border-color: rgba(0,22,22,0.4);
  }
  /* Hide the links inside the navigation menu (except for logo/home) */


  .header a {
  background: black;
  width:20%;
    text-align:center;
    position:relative;
    height:100%;
    color:white;
  }
  #nav-links{
    display: none;
  }
  #nav-links a{
    display: none;
  }


#main-doc{
  position: absolute;
    margin-left: 310px;
    padding: 20px;
}
@media only screen and (min-width: 438px){
   #nav-links{
    display: block; 
  }

#nav-links a{
  display:block;
  text-decoration: none;
  border-bottom: 1px solid ;
    padding: 8px;
    padding-left: 45px;
  color: black;
  border-color: rgba(0,22,22,0.4);

  }

.nav{
     position: fixed;
     left:0;
    min-width: 290px;
  border-right: solid;
  border-color: rgba(0,22,22,0.4);
}
.icon{
  display:none;
}
  .header{
    display:block;
    text-align:center;
    height:100%;
    border-bottom:1px solid;
    border-color: rgba(0,22,22,0.4);
  }
}

Answer 1

Declare your media query at bottom. and add these to the media query:

.icon {
    display: block;
}

So you styles should look like following:

#main-doc{
  position: absolute;
  margin-left: 310px;
  padding: 20px;
}
#nav-links{
  display: block; 
}
#nav-links a{
  display:block;
  text-decoration: none;
  border-bottom: 1px solid ;
  padding: 8px;
  padding-left: 45px;
  color: black;
  border-color: rgba(0,22,22,0.4);
}
.nav{
  position: fixed;
  left:0;
  min-width: 290px;
  border-right: solid;
  border-color: rgba(0,22,22,0.4);
}
.icon{
  display:none;
}
.header{
  display:block;
  text-align:center;
  height:100%;
  border-bottom:1px solid;
  border-color: rgba(0,22,22,0.4);
}
@media only screen and (max-width: 815px){
  #nav{
    position: relative;
  }
  .header{
    display:flex;
    align-items: center;
    flex-direction: row;
    height:100%;
    border-bottom:1px solid;
    border-color: rgba(0,22,22,0.4);
  }
  /* Hide the links inside the navigation menu (except for logo/home) */
  .header a {
    background: black;
    width:20%;
    text-align:center;
    position:relative;
    height:100%;
    color:white;
  }
  #nav-links{
    display: none !important;
  }
  #nav-links a{
    display: none !important;
  }
  .icon {
    display: block;
  }
}