<div class="wrapper">
<header class="banner navbar navbar-default navbar-static-top clearfix">
<div class="container">
<div class="row">
<div class="menu-toggle visible-xs">
<div class="menu-close"><span class="bar"></span><span class="bar"></span><span class="bar"></span></div>
</div>
<nav class="nav-test col-sm-6 col-md-6 col-sm-offset-3 col-md-offset-4" role="navigation">
<ul id="menu-primary" class="nav navbar-nav">
<li class="menu-about-us"><a href="#">About Us</a></li>
<li class="dropdown menu-item-one"><a class="dropdown-toggle" href="#">Item one</a>
<ul class="dropdown-menu">
<li class="menu-sub-item-one"><a href="#">Sub-item one</a></li>
<li class="menu-sub-item-two"><a href="#">Sub-item two</a></li>
</ul>
</li>
<li class="dropdown menu-item-two"><a class="dropdown-toggle" href="#">Item two</a>
<ul class="dropdown-menu">
<li class="menu-sub-item-three"><a href="#">Sub-item three</a></li>
</ul>
</li>
<li class="menu-contact"><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
</div>
<div class="hero-area text-center">
<h1>This is the hero area</h1>
</div>
// Variables we need to know beforehand
$menu-item-height: 50px; // Every menu item has this height
$dropdown-max-rows: 2;
$total-menu-items: 7;
.banner {
background-color: #aaa;
}
.hero-area {
background-color: #fef;
min-height: 250px; // any height
padding: 30px 0;
}
.navbar {
margin-bottom: 0;
}
.navbar-nav{
margin-top: 0;
margin-bottom: 0;
>li{
>a{
padding-top: 15px;
padding-bottom: 15px;
}
}
}
.menu-toggle {
.menu-close {
cursor: pointer;
margin: 0 10px 0 25px;
width: 50px;
height: auto;
padding: 10px 15px 10px 5px;
.bar {
margin: 8px auto;
display: block;
background-color: white;
width: 100%;
height: 2px;
transition: all 0.25s linear;
}
&.open {
.bar:nth-child(2) {
opacity: 0;
}
.bar:nth-child(3) {
transform: rotate(43deg);
transform-origin: bottom right;
}
.bar:nth-child(1) {
transform: rotate(-43deg);
transform-origin: top right;
}
}
}
}
.nav-test {
background-color: #bbb;
height: 0;
transition: 0.25s height linear;
overflow: hidden;
&.open {
height: $menu-item-height * $total-menu-items; // Depends on total number of menu items
}
}
.dropdown-menu {
height: auto;
display: block;
position: static;
float: none;
border-radius: 0;
border: none;
box-shadow: none;
background-color: transparent;
padding: 0;
>li {
display: block;
>a {
padding: 15px;
}
}
}
@media (min-width: 768px) {
.wrapper {
max-width: 100%;
overflow: hidden;
height: $menu-item-height * ($dropdown-max-rows + 1); // total height of menu, including dropdowns and header.banner height -- header.banner height == menu item height
background: transparent;
}
.nav-test {
height: auto;
position: relative;
overflow: visible;
&:before,
&:after {
content: " ";
display: block;
position: absolute;
top: 0;
right: 100%;
left: -1000%;
height: $menu-item-height;
background-color: #bbb;
}
&:after {
left: 100%;
right: -1000%;
}
}
.dropdown-menu {
padding-top: 0;
padding-bottom: 0;
padding-left: 9999px;
margin-left: -10000px;
padding-right: 9999px;
margin-right: -10000px;
background-color: #aaa;
height: 0;
overflow: hidden;
transition: 0.25s height linear;
float: left;
position: absolute;
>li {
>a {
padding: 15px;
line-height: 20px;
}
}
}
.dropdown {
&:hover {
.dropdown-menu {
height: $menu-item-height * $dropdown-max-rows; // total menu height less header.banner height
}
}
}
.hero-area {
margin-top: 0 - ($menu-item-height * $dropdown-max-rows); // flush with header.banner
}
}
View Compiled
