I've been working on a flexbox navigation menu, but I'm facing an issue where the expanded mobile menu doesn't push the content down.
If you'd like to see the live demo in action, click here: https://stackblitz.com/edit/bootstrap-nabar-snoyrg
.main-header {
width: 100%;
float: left;
display: block;
min-height: 100vh;
height: 100%;
background-size: cover;
// other CSS properties here
}
// more CSS code goes here
@media only screen and (max-width: 768px) {
.main-nav {
margin: 0;
display: block;
position: inherit;
}
// additional media query styles
}
<div class="main-header">
<nav class="main-nav navbar" appSidebar #ref="appSidebar">
<div class="main-nav__link">
<img src="image-url-here">
</div>
// main navigation items
</nav>
<div class="main-banner">
<h2>We are a team of</h2>
<p>Description text goes here.</p>
<a href="#" class="main-banner__green-button main-banner__arrow-right">Read more <i></i></a>
<a href="#" class="main-banner__arrow-down"></a>
</div>
</div>
<div class="container">
<p>
Placeholder text for the container element.
</p>
</div>Can anyone spot what's causing the issue in my code?