Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS

Hola, con la media queries creo que logre el objetivo pero al agregar el java script, ya el menu no se desplego y tampoco salia al final de mi pagina, que antes de agregarlo si iba al dar clid en el menu. Adjunto CSS para si alguien lo puede ver.

/* Reset CSS -------------------- */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}

body { line-height: 1;}

ol, ul { list-style: none;}

blockquote, q { quotes: none;}

blockquote:before, blockquote:after,

q:before, q:after {
content: '';
content: none;}

table { border-collapse: collapse;
border-spacing: 0;}

*{box-sizing: border-box;}

img{max-width:100%;}

/* Genral ---------------------- */

body{background-color: aliceblue;
font-family: 'Vollkorn', serif, sans-serif;
color: navy;
font-size: 1.8; }

p{padding-top: 18px;}

.top-bar{position: absolute;
top: 10px;
left: 0px;
right: 0px;
padding: 10px;}

.logotype{display: inline-block;
padding: 25px 5px;
font-family: 'Lobster', cursive;
font-size: 44px;
color: #32421A;}

.lanzador{display: inline-block;
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
padding: 5px;
color: #d03b40;}

/* Estilos ---------------------- */

h1{font-size: 40px;
color: #f5f0ed}

h2{font-size: 24px;}

h3{font-size: 22px;}

p{font-size: 14px;}

/* Estructura ---------------------- */

body{overflow: auto;
margin: 50px 0px 0px 0px; }

.separador{display: inline-block;
width: 30%;
margin-top: 25px;}

.caja1{overflow: hidden;
width: auto;
height: 300px;
background-image: url(proyecto/imágenes/fondo1.jpg);
color: #f5f0ed;
text-align: center;
padding: 1%;
background-size: cover;
background-repeat: no-repeat;
background-position: top;
padding: 100px 20px 50px 20px;
}

.caja2{width: auto;
min-height: 90px;
padding: 15px 5px;
background-color:#ded6c0;
color: #d03b40;
text-align: center;}

.caja3{width: auto;
min-height: 90px;
padding:15px 5px;
background-color: #d03b40;
text-align: center;
color: #f5f0ed;}

.caja4{width: auto;
min-height: 200px;
padding: 20px 10px;
background-image: url(Proyecto/Imágenes/Fondo2.jpg);
background-size: cover;
background-repeat: no-repeat;
color: #f5f0ed;
text-align: center;}

.caja5{background-color: #f5f0ed;
overflow: hidden;
color: #241d1b;
text-align: left; }

.caja5 .pan{padding: 5% ;
text-align: center;
min-height: 80px}

.caja5 .pan img{width: 20%; }

.caja5 .tarta{padding: 5%;
text-align: center;
min-height: 80px;}

.caja5 .tarta img{width:20%}

.caja5 .dulces{padding: 5%;
text-align: center;
min-height: 80px;}

.caja5 .dulces img{width:20%}

.caja5 .ingredientes{padding: 5%;
text-align: center;
min-height: 80px;
overflow: auto;}

.caja5 .ingredientes img{width:20%}

.caja6{width: auto;
padding: 5% 2%;
background-color: #d03b40;
overflow: hidden;
text-align: center;
color: #f5f0ed;
min-height:90px }

.caja7{width:auto;
padding: 5%;
background-color: #ded6c0;
overflow: hidden;
text-align: center;
color: #d03b40;
min-height: 90px}

.caja8{width: auto;
padding: 1% ;
background-color: #241d1b;
min-height: 40px;
text-align: center;
color:#f5f0ed; }

ul{padding: 0;
list-style: none;
margin: 0}

.navegacion a{display: block;
text-decoration: none;
color: #d03b40;
border-bottom: 1px solid #241d1a;
padding: 1%;
width: auto}

@media screen and (max-width: 700px) {

.js .navegacion{max-height: 0;
overflow: hidden;
transition: max-heigth .5s;
position: absolute;
background-color: #2d211f;
top: 43px;
left: 30px;
right: 30px}

.js .navegacion a{padding: 5px 10px;
color: #fff;
border-top: 1px solid rgba(255, 255, 255, .4);}

.js navegacio.menu-desplegado{max-height: 200px;}

}

@media screen and (min-width: 701px) {

p, a{font-size: 16px;
}

.lanzador{display: none;}

.navegacion{display: inline-block;
position: absolute;
top: 3px;
right: 3px;
padding: 2px;
color: #f5f0ed;
list-style-type: none;
width: 100%;
text-align: center;}

.navegacion li{display: inline-block;
padding: 2px;
margin-right: 10px;
}

.caja4{padding: 30px 20px}
.caja2,
.caja3,
.caja6,
.caja7{width: 50%;
float: left;
min-height:200px;}
.pan,
.tarta,
.dulces,
.ingresdientes{width: 50%;
float: left;
max-height: 200px;}

}

@media screen and (min-width: 1201px) {

body{margin: 60px 0px 0px 0px; }

h1{font-size: 48px}
h2{font-size: 30px}
h3{font-size: 28px}
p, a{font-size: 22px;
}

.pan,
.tarta,
.dulces,
.ingresdientes{width: 25%;
float: left;
max-height: 100px;}


}