title: .btn-group hamburger menu issues and confusion
body: <p>I'm creating a responsive website, and I'm relatively new to bootstrap. I'm trying to create a responsive navigation that turns into a hamburger menu at less than 1340px. I'm using a split button setup right now, see <a href="https://jsfiddle.net/ethacker/u38scspb/" rel="nofollow noreferrer">https://jsfiddle.net/ethacker/u38scspb/</a>, it doesn't really work well, it turns into a scrollable thing. I'd like the dropdown to look something like this on less than 1340px screens.</p>
  
  <p><img src="https://osvaldas.info/incoming/images/blog/style_posts_s/drop-down-navigation-touch-friendly-and-responsive-3.jpg" alt="desired mobile menu" title="tooltip"></p>
  
  <p>I'm trying to add the navbar classes (see <a href="https://jsfiddle.net/ethacker/d306gphq/1/" rel="nofollow noreferrer">https://jsfiddle.net/ethacker/d306gphq/1/</a>). When I do this, the navbar hamburger icon doesn't show anymore. </p>
  
  <p>So my questions are : <br>
  1. How do I make the hamburger menu icon show? <br>
  2. Am I doing this the right way, or is there an easier way?<br>
  3. How do I make it look like the above image when viewed on mobile devices/smaller than 1340px screens?<br>
  4. How do I trigger the hamburger button at less than 1340px instead of just on mobile?</p>
  
  <p>I'm trying to learn, but I'm just not sure which direction to head in.</p>
  
  <p>My CSS code:</p>
  
  <pre><code>body {
      background-image: url('backgroundarrows.png');
  }
  body &gt; div.container-fluid &gt; header {
      background-color: #e9e7ff;
      margin-top: 0;
      text-align: center;
  }
  .inline-display {
      display: inline;
  }
  
  .float-right {
      float: right;
  }
  
  #logo {
      height: 90px;
      width: 170px;
  }
  
  #search {
      margin-right: 1%;
  }
  
  .container-fluid {
      padding: 0;
  }
  
  .content {
      padding: 1%;
      background-color: #f9fdff;
      border: solid thin lightgray;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      margin: 0 1%;
  }
  
  section.content {
      width: 60%;
  }
  
  aside.content {
      width: 30%;
      text-align: center;
  }
  
  .btn {
      color: rgb(181,181,225);
  }
  
  #my-btn-group{
      margin-left: 1%;
  }
  
  .mybtngroup {
      border-right: solid thin rgb(181,181,225);
      border-left: solid thin  rgb(181,181,225);
  }
  
  .mybtngroup &gt; a.btn.divider {
      border-right: solid thin rgb(181,181,225);
  }
  
  .heading, div.quip{
      font-family: "Monotype Corsiva", cursive;
      text-align: center;
  }
  div.quip, aside &gt; h2.heading{
      border-bottom: thin solid grey;
  }
  
  div.quip {
      font-size: 16px;
  }
  a{
      color: rgb(165, 165, 205);
      text-decoration: none;
  }
  
  #blogposts {
      margin-top: -5%;
  }
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  &lt;header class="page-header"&gt;
      &lt;!-- logo --&gt;
      &lt;h1 class="inline-display"&gt;&lt;a href="index.php"&gt;&lt;img id="logo" src="mommyinfologo.png"/&gt;&lt;/a&gt;&lt;/h1&gt;
      &lt;br/&gt;
      &lt;div class="btn-group" id="my-btn-group"&gt;
          &lt;!-- Home Group --&gt;
          &lt;div class="btn-group mybtngroup"&gt;
              &lt;a class="btn" href="index.php"&gt;Home&lt;/a&gt;
              &lt;a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                  &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
              &lt;/a&gt;
              &lt;ul class="dropdown-menu mylist"&gt;
                  &lt;li&gt;&lt;a href="/mommy-madness"&gt;This Mommy's Madness&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/about"&gt;About Mommy Info&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/contact"&gt;Contact Mommy Info&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- Pregnancy group--&gt;
          &lt;div class="btn-group mybtngroup"&gt;
              &lt;a class="btn" href="/pregnancy"&gt;Pregnancy&lt;/a&gt;
              &lt;a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                  &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
              &lt;/a&gt;
              &lt;ul class="dropdown-menu mylist"&gt;
                  &lt;li&gt;&lt;a href="/pregnancy/trying-to-conceive"&gt;Trying to Conceive&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/pregnancy/fetal-development"&gt;Fetal Development&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/pregnancy/gender-predictions"&gt;Gender Predictions&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/pregnancy/labor-and-delivery"&gt;Labor and Delivery&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- All About Baby group--&gt;
          &lt;div class="btn-group mybtngroup"&gt;
              &lt;a class="btn" href="/all-about-baby"&gt;All About Baby&lt;/a&gt;
              &lt;a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                  &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
              &lt;/a&gt;
              &lt;ul class="dropdown-menu mylist"&gt;
                  &lt;li&gt;&lt;a href="/all-about-baby/advice"&gt;Advice&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/all-about-baby/guidelines"&gt;Guidelines&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/all-about-baby/milestones"&gt;Milestones&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/all-about-baby/learning-development"&gt;Learning Development&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- Health and Nutrition group--&gt;
          &lt;div class="btn-group mybtngroup"&gt;
              &lt;a class="btn" href="/health-and-nutrition"&gt;Health and Nutrition&lt;/a&gt;
              &lt;a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                  &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
              &lt;/a&gt;
              &lt;ul class="dropdown-menu mylist"&gt;
                  &lt;li&gt;&lt;a href="/health-and-nutrition/pregnancy-nutrition"&gt;Pregnancy Nutrition&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/health-and-nutrition/breastfeeding"&gt;Breastfeeding&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/health-and-nutrition/formula-feeding"&gt;Formula Feeding&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/health-and-nutrition/toddler-nutrition"&gt;Toddler Nutrition&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/health-and-nutrition/prenatal-exercise"&gt;Prenatal Exercise&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/health-and-nutrition/postpartum-exercise"&gt;Postpartum Exercise&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/health-and-nutrition/organic-diy-health"&gt;Organic DIY Health&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- Party Momma group--&gt;
          &lt;div class="btn-group mybtngroup"&gt;
              &lt;a class="btn" href="/party-momma"&gt;Party Momma&lt;/a&gt;
              &lt;a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                  &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
              &lt;/a&gt;
              &lt;ul class="dropdown-menu mylist"&gt;
                  &lt;li&gt;&lt;a href="/party-momma/pregnancy-announcement"&gt;Pregnancy Announcement&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/party-momma/gender-reveal"&gt;Gender Reveal&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/party-momma/baby-shower"&gt;Baby Shower&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/party-momma/birth-announcement"&gt;Birth Announcement&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/party-momma/birthdays"&gt;Birthdays&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- Stations group--&gt;
          &lt;div class="btn-group mybtngroup"&gt;
              &lt;a class="btn" href="/stations"&gt;Stations&lt;/a&gt;
              &lt;a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                  &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
              &lt;/a&gt;
              &lt;ul class="dropdown-menu mylist"&gt;
                  &lt;li&gt;&lt;a href="/stations/hospital-bag"&gt;Hospital Bag&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/stations/diaper-bag"&gt;Diaper Bag&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/stations/changing-station"&gt;Changing Station&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/stations/baby-gear"&gt;Baby Gear&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- Memory Markers group--&gt;
          &lt;div class="btn-group mybtngroup"&gt;
              &lt;a class="btn" href="/memory-markers"&gt;Memory Markers&lt;/a&gt;
              &lt;a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                  &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
              &lt;/a&gt;
              &lt;ul class="dropdown-menu mylist"&gt;
                  &lt;li&gt;&lt;a href="/memory-markers/diy"&gt;Do It Yourself&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/memory-markers/buy-it"&gt;Buy It&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- Reviews group--&gt;
          &lt;div class="btn-group mybtngroup"&gt;
              &lt;a class="btn mycaret" href="/reviews"&gt;Reviews&lt;/a&gt;
              &lt;a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                  &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
              &lt;/a&gt;
              &lt;ul class="dropdown-menu mylist"&gt;
                  &lt;li&gt;&lt;a href="reviews/games"&gt;Game Reviews&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="reviews/gear"&gt;Gear Reviews&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="reviews/learning"&gt;Learning Reviews&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- Blog--&gt;
          &lt;a class="btn mybtngroup" id="blog" href="/mommy-madness"&gt;
              Blog
          &lt;/a&gt;
      &lt;/div&gt; &lt;!-- closing div#btn-group-justified --&gt;
      &lt;input class="float-right" type="text" name="search" id="search" placeholder="Search"/&gt;
  </code></pre>