title: Bootstrap navbar toggler icon (hamburger) size
body: <p>Just wondering if there is any way to resize Bootstrap's navbar toggler icon?</p>
  
  <p>I'm using the <code>.navbar-dark</code> theme as a template, here are the dimensions:</p>
  
  <pre><code>.navbar-dark {
    background-color: #111 !important;
  }
  
  .navbar {
    background-image: url("/images/Harris_Logo_Small2.svg");
    background-position: center;
    background-repeat: no-repeat;
    height: 25px;
    padding: 0px;
    margin: 3px;  
  }
  
  .navbar-nav {
    background-color: #111111;
    border-color: #111111;
  }
  </code></pre>
  
  <p>And here is the corresponding CSS:</p>
  
  <pre><code>.navbar .navbar-toggle {
    border-color: #ff0000;
  }
  
  .navbar .navbar-toggle:hover,
  .navbar .navbar-toggle:focus {
    background-color: #ff0000;
  }
  
  button.navbar-toggler {
    background-color: #111111;
    height: 25px;
    width: 25px;
  }
  
  button.navbar-toggler .icon {
    background-color: #111;
  }
  
  .navbar-default .navbar-toggle .icon-bar{
    background-color: #111;
  }
  
  .navbar .navbar-toggle .navbar-toggler-icon {
    color: #ecf0f1;
    height: 20px !important;
    width: 20px !important;
  }
  </code></pre>
  
  <p>As you can (hopefully) see, the toggler icon is far too large for the dimensions I've chosen for the navbar height.  Any help is greatly appreciated.</p>