I'm struggling to modify my code in order for the navigation to collapse on mobile and tablet devices, but I can't seem to make it work. I attempted to adjust the @grid-float-breakpoint to 992px, however that did not have the desired effect. Any suggestions on where I might be making a mistake?
I've simplified the HTML for brevity, but I believe you'll understand the gist of it.
<div id="main-nav" class="row">
<div class="header-wrap">
<div class="site-branding">
<p class="site-title"><a href="#" rel="home">SITE TITLE</a></p>
</div><!-- .site-branding -->
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<ul id="primary-menu" class="menu">
<li class="menu-item menu-item-has-children dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">Parent Link<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Sub Link</a></li>
<li class="menu-item"><a href="#">Sublink</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
SCSS
.nav-menu {
display: none;
position: relative;
top: 70px;
}
.dropdown-menu {
display: none;
position: static;
width: 100%;
li {
width: 100%;
}
}
.main-navigation.toggled {
.nav-menu {
width: 100%;
display: block;
background-color: #363636;
li {width: 100%; display: block;background-color: #363636; text-transform: uppercase; border-top: .5px solid #434343;}
li > a {
padding: 8px;
pointer-events: none; // prevent it's immediate A child to follow HREF
cursor: default;
}
a {color: #fff;}
.dropdown-menu {
position:static;
top: 80px;
display: none;
background: none;
box-shadow: none;
padding: 0;
a {
color: #fff;
pointer-events: auto;
cursor: pointer;
}
li {
background-color: #000;
a {
width: 100%;
&:hover {
color: #000;
}
}
}
}
}
}
@media (min-width: 992px) {
#masthead:hover {
padding-top:29px;
background-color:$site-dark-gray;
-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.7);
box-shadow:0 0 8px rgba(0, 0, 0, 0.7);
height:100px;
.site-branding{
width:240px;
height:49px;
@media (max-width: $screen-sm-max) {
width:210px;
}
.site-title{
a{
width:167px;
height:49px;
}
}
}
@media (max-width: $screen-xs-max) {
padding-top:29px;
height:100px;
}
}
.main-navigation {
.nav-menu {
top: 0;
}
.dropdown-menu {
visibility: hidden;
display: block;
opacity: 0;
border-radius: 0;
top: 3.15em;
background-color: $site-dark-gray;
// transform: translateY(-20px);
transform: translateY(20px);
transition: all .3s ease;
left: -1.5em !important;
overflow: hidden;
padding: 0;
border: 0;
li:first-child {display: none !important;}
li {
margin: 0 !important;
transition: all .3s ease;
a {
padding-top: 8px;
padding-bottom: 8px;
}
&:hover a {
color: #000 !important;
background-color: #fff;
}
}
.active > a {
background-color: #fff;
color: #000 !important;
}
}
.dropdown:hover .dropdown-menu {
display: block;
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
.dropdown:after {
content: "";
display: block;
height: 2em;
position: absolute;
top: 1em;
width: 100%;
}
}
}