title: Converting custom nav bar to dropdown menu on bootstrap
body: <p>I want to have the navigation bar I made convert to a dropdown-menu when viewed on a smaller screen (like phones and tablets). The problem is, I didn't use the conventional bootstrap nav bar system, and just made my own. I know that the usual bootstrap solution involves using the nav classes, but I'm not really sure how I'd integrate those into my own code since I didn't use them to begin with. For tablets, I was hoping to have the main menu buttons hide into a dropdown menu with a toggle button, while keeping the logo there. Here is my code:</p>
  
  <pre><code>&lt;header class="main-header" id="Navigation"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;img class="HeaderLogo img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1499450095/Enpowered_Logo_k69cqw.png"&gt;
              &lt;/div&gt;
              &lt;div class="col-md-6 text-center"&gt;
                  &lt;div class="row text-center"&gt;
                      &lt;div class="col-md-2 offset-md-1"&gt;
                          &lt;p class="NavBarButtons"&gt; WHY US &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-2"&gt;
                          &lt;p class="NavBarButtons"&gt; FIX YOUR BILL &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-2"&gt;
                          &lt;p class="NavBarButtons"&gt; HOW IT WORKS &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-2"&gt;
                          &lt;p class="NavBarButtons"&gt; LEARN WITH US &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-2"&gt;
                          &lt;p class="NavBarButtons"&gt; COMMERCIAL &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-3 offset-md-4"&gt;
                          &lt;p class="NavBarButtons"&gt; LOG IN &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-4 md-offset-3"&gt;
                          &lt;button class="SignUp"&gt;&lt;b&gt; UNLOCK YOUR POWER &lt;/b&gt;&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>Since I used the grid system, everything collapses pretty well until a certain point, then the entire header completely messes up and stacks, which is why I wanted to try having the menu buttons go into a dropdown menu when that breakpoint is reached. Any help at all is much appreciated. Thanks!</p>