Media query for navbar doesn't work on mobile - html

Question

I'm making a navbar for my site following a tutorial. While working on my mobile menu responsiveness I made a ".burger" class with three "bars" to represent the menu. For some reason the menu icon doesn't show at all.
Code: https://gist.github.com/VlatkoStojkoski/290234f49a6f4e51019ca4b014c03f37

Answer 1

You have wrong css selector in media query.
add this to #media screen and (max-width: 775px).
nav .burger {
display: block;
}

Answer 2

It's because you set display: none to the menu. Even though you added a media query with display: block on the bottom, the first one will always rule.
You should add a media query to the first rule and you can remove the display: block on the bottom.
.burger {
#media screen and (min-width: 775px) {
display: none;
}
}
So this is your complete code:
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap");
$text-color: whitesmoke;
$font-stack: "Source Sans Pro", sans-serif;
$nav-color: rgba(79, 91, 102, 0.8);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
font-family: $font-stack;
background-color: $nav-color;
h1 {
letter-spacing: 5px;
font-size: 30px;
color: $text-color;
}
img {
width: 64px;
}
ul {
display: flex;
width: 35%;
justify-content: space-around;
a {
font-size: 21px;
color: $text-color;
text-decoration: none;
}
li {
list-style: none;
}
}
.burger {
#media screen and (min-width: 775px) {
display: none;
}
div {
width: 30px;
height: 4px;
background-color: $text-color;
margin: 5px;
}
}
}
#media screen and (max-width: 1024px) {
nav ul {
width: 50%;
}
}
#media screen and (max-width: 775px) {
body {
overflow-x: hidden;
}
nav ul {
position: absolute;
right: 0px;
height: 88vh;
top: 12vh;
background-color: $nav-color;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
li {
opacity: 0;
}
}
}