I have created a web page using flexbox and have included a responsive flex-navigation bar. However, when the hamburger is expanded it pushes the rest of the page down with it. I have tried positioning the .active class to absolute on the "display block" and z-index of 10000, but these do not help.I have also tried wrapping the nav inside the row flex container but that ruined the rest of the layout.
Have considered the the js fiddle found at this link:http://jsfiddle.net/hRKgV/ but it does not have a flex box layout and I am wondering if floats are true to the concept of flexbox as it also removes that element from the normal flow of the document?
Any suggestions would be greatful!
Here is the code for the index page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
background-color: #faf6bf;
}
.header {
background-image: url("images/index.jpg");
max-width: 100%;
height: auto;
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
box-shadow: 2px 2px 5px purple;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 30px;
}
@media screen and (max-width: 700px) {
h1 {
font-size: 40px;
}
h3 {
font-size: 26px;
}
}
.navbar {
position: relative;
font-size: 18px;
background-color: navy;
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
clear: both;
}
.main-nav {
list-style-type: none;
display: none;
}
.nav-links,
.logo {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
}
.main-nav li {
text-align: center;
margin: 15px auto;
position:
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}
.active {
display: block;
}
@media screen and (min-width: 768px) {
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0;
}
.navbar-toggle {
display: none;
}
.logo:hover,
.nav-links:hover {
color: rgba(255, 255, 255, 1);
}
}
.row {
display: flex;
margin-left: 80px;
margin-right: 80px;
flex-wrap: wrap;
}
.fakeimg {
background-color: #faf6bf;
width: 100%;
padding: 20px;
}
.side {
-webkit-flex: 20%;
-ms-flex: 20%;
flex: 20%;
background-color: orange;
color: white;
padding: 20px;
}
.side2 {
-webkit-flex: 20%;
-ms-flex: 20%;
flex: 20%;
background-color: orange;
color: white;
padding: 50px;
}
.main {
flex: 60%;
background-color: #fffcc7;
padding: 20px;
}
.footer {
background-color: brown;
text-align: center;
color: white;
padding: 20px;
}
@media (max-width: 700px) {
.row {
flex-direction: column;
}
}
</style>
</head>
<body>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fa fa-bars"></i> </span>
<a href="#" class="logo">logo</a>
<ul class="main-nav" id="js-menu">
<li>
<a href="#" class="nav-links">Home</a>
</li>
<li>
<a href="#" class="nav-links">Products</a>
</li>
<li>
<a href="#" class="nav-links">About Us</a>
</li>
<li>
<a href="#" class="nav-links">Contact Us</a>
</li>
<li>
<a href="#" class="nav-links">Blog</a>
</li>
</ul>
</nav>
<script type="text/javascript">
let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener('click', function() {
mainNav.classList.toggle('active');
});
</script>
<div class="header">
<div class="hero-text">
<h1>I am Jane Doe</h1>
<h3>And I'm a Photographer</h3>
<button>Hire me</button>
</div>
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="side2">
<h4>follow me on socila media:</h4><br />
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<script type="text/javascript">
let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener('click', function() {
mainNav.classList.toggle('active');
});
</script>
<!-- Footer -->
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>