When the width reaches a maximum of 37.em, the navigation styled under a hamburger menu automatically opens. I would prefer it to remain closed rather than open when scaled to that size. It also allows the underlying menu underneath it (div.gallery with clickable radio buttons/labels) to show, and I'd like the navigation to push everything below it down once opened.
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon"
type="image/png"
href="mpicon.png">
<title>The Marshall Project | About Us</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link href="about.css" rel='stylesheet' type='text/css' />
<!-- javascript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></s...
Here is the CSS:
/* split sides (for content) and navigation */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* configuring support of HTML5 */
header, main, nav, footer, figure, figcaption, aside, section, article {
display: block;
}
/* general body styles */
body {
font-family: Franklin Gothic, Arial, sans-serif;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
#intro {
...
and here is the external JavaScript:
$(document).ready(function() {
$(".burger-nav").on("click", function() {
$("header nav ul").toggleClass("open");
})
})