title: Bootstrap Mobile Menu for Tablet?
body: <p>I'm trying to change my code so that the navigation collapses for mobile and tablet but I can't seem to get it to work. I tried changing the @grid-float-breakpoint to 992px but that didn't seem to work. Any ideas on where I might be going wrong?</p>
  
  <p>I simplified the html because it was too much but I think you'll get the idea.</p>
  
  <pre><code>&lt;div id="main-nav" class="row"&gt;
                  &lt;div class="header-wrap"&gt;
          &lt;div class="site-branding"&gt;
                              &lt;p class="site-title"&gt;&lt;a href="#" rel="home"&gt;SITE TITLE&lt;/a&gt;&lt;/p&gt;
                      &lt;/div&gt;&lt;!-- .site-branding --&gt;
          &lt;nav id="site-navigation" class="main-navigation" role="navigation"&gt;
              &lt;button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;ul id="primary-menu" class="menu"&gt;
         &lt;li class="menu-item menu-item-has-children dropdown"&gt;
          &lt;a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#"&gt;Parent Link&lt;b class="caret"&gt;&lt;/b&gt;
          &lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
            &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Sub Link&lt;/a&gt;&lt;/li&gt;
            &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Sublink&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
       &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SCSS</p>
  
  <pre><code>.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 &gt; 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%;
            &amp;: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;
                  }
                  &amp;:hover a {
                      color: #000 !important;
                      background-color: #fff;
                  }
              }
              .active &gt; 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%;
      }
    }
  }
  </code></pre>