When the navigation drawer opens, it pulls down other web blocks. When it closes, the blocks come up. Additionally, the drawer menu has occupied more space on the top of my website, making it difficult to keep blocks near the navigation bar. There is a large empty space there. However, the drawer menu works fine. How can I solve this issue?
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<header>
<i id="hamburger" class="fa fa-bars"></i>
<h2>MY WEB</h2>
</header>
<nav>
<a href="#"><i class="fa fa-user-secret"></i><span>A</span></a>
<a href="#"><i class="fa fa-check-circle-o"></i><span>B</span></a>
<a href="#"><i class="fa fa-lightbulb-o"></i><span>C</span></a>
<a href="#"><i class="fa fa-id-badge"></i><span>D</span></a>
<a href="#"><i class="fa fa-lightbulb-o"></i><span>E</span></a>
<a href="#"><i class="fa fa-lightbulb-o"></i><span>F</span></a>
</nav>>
<p><span style="font-size: 14pt"><p style="text-align: justify"> .... (content continues) ... </p></span>
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">.
</script>
</body>
</html>
CSS
header, nav {
background-color: #06C;
font-family: 'Open Sans';
}
/* additional CSS rules */
Javascript
$("#hamburger").click(function(){
$("nav").toggleClass('open', 'close');
});
$("a").click(function(){
$("nav").toggleClass('open', 'close');
});