Basic Media Queries Not Working - css

Question

Not quite sure why my media queries aren't working. Very much a beginner. Trying to get the navigation menu to respond similarly to
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
Normal media queries don't work either, I know i don't have topnav as the class setting for the nav like they do in the w3 example. I just have been using nav.
/**********************************
GENERAL
***********************************/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
html, body {
height: 100%;
}
body{
margin:0;
padding:0;
background: rgba(226,226,226,1);
}
a{
text-decoration: none;
}
li{
list-style-type: none;
display: inline
}
#wrapper{
max-width: 100%;
max-height: 100%;
/*min-height: calc(100vh - 120px);*/
/* 80px header + 40px footer = 120px */
width: 85%;
margin: 0 auto;
overflow: visible;
position:relative;
background: rgba(147,206,222,1);
}
img{
max-width: 100%;
width: 200px;
margin-right: 15px;
float: left;
margin-bottom: 20px;
padding:1px;
border:1px solid #021a40;
}
h1{
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
font-family: Garamond;
}
/**********************************
HEADING
***********************************/
header{
color:blue;
text-align: left;
float: left;
margin: 0 0 30px 0;
padding: 20px 0 0 0;
width: 100%;
font-size: 32;
}
/**********************************
NAVIGATION
***********************************/
nav{
max-width: 100%;
max height: 100%;
padding: 3.5em;
margin: 0;
background-color: green;
text-align: right;
font-family: Garamond;
}
nav ul {
list-style: none;
margin: 0 10px 20px; /*pushes div down*/
padding: 0;
text-decoration: none;
/*background-color: purple;*/
max-width: 100%;
max-height: 200px;
}
nav menu:{
}
nav li {
display: inline-block;
}
nav a, a:link, a:visited {
font-weight: 800;
padding: 15px 10px;
/*border-style: double;*/
border-radius: 10px;
margin-bottom: 20px;
color:white;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
a:hover{
background-color: gray;
}
#back-to-hp{
text-align: left;
}
/**********************************
FOOTER
***********************************/
footer {
background: rgba(255,255,255,1);
/*max-height: 100%;
position:relative;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
overflow:hidden;
text-align: center;*/
width:100%;
height:100px;
position:relative;
bottom:0;
left:0;
padding-top: 10px;
margin-top: 15px;
}
}
/**********************************
PAGE: ADOPTION
***********************************/
#image-paragraph{
font-size: 20;
text-align: center;
float: right;
}
#content{
font-family: Garamond;
}
/**********************************
PAGE: ABOUT
***********************************/
/**********************************
PAGE: CONTACT
***********************************/
/**********************************
COLORS
***********************************/
/**********************************
MEDIA QUERIES
***********************************/
/*#media all (max-width: 960px) {
body{
background-color: royalblue;
}
p{
color:white;
}
}
##media (min-width:481px) and (max-width: 700px) {
}*/
#media screen and (max-width:680px) {
ul.nav li:not(:first-child) {display: none;}
ul.nav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.nav.responsive {position: relative;}
ul.nav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.nav.responsive li {
float: none;
display: inline;
}
ul.nav.responsive li a {
display: block;
text-align: left;
}
}

Answer 1

You have two media queries set at the max-width of 680px. Possibly one was meant to be a min-width? If not then I don't see why you didn't put all of it under a single media query.
EDIT:
Try changing ul.nav li:not(:first-child) {display: none;} to nav ul li:not(:first-child) {display: none;}.
This is because media queries read css as nested from their parents, so you need to include the parent elements correctly.
Also, from experience, I've noticed visibility: hidden; consistently works better in many scenarios than display: none;. This depends on your element positioning, though. Either works in your case.