title: Issue with navbar alignment & dropdown menu in Mobile View
body: <p>I'm having an issue with my navbar, particularly with my DropDown menu.</p>
  
  <p>My navbar goes into a 'submenu' / 'mobile navbar' if the user's device is not wide enough to display all of my nav bar links, however, when this view is loaded, my dropdown menu is not displayed correctly (i'll provide a gif below).</p>
  
  <p><a href="https://gyazo.com/0be3c18b17ca6844b45504ccf7bef943" rel="nofollow noreferrer">https://gyazo.com/0be3c18b17ca6844b45504ccf7bef943</a></p>
  
  <p>As shown in the GIF, my "Home" menu goes into the Top Left corner, while the "Mobile Toggle Menu" goes into the bottom right corner, is there anyway to fix this?  I would still like the Home to be on the left, and the Mobile Menu to be on the right, I would just like them to be aligned correctly (Left Center &amp; Right Center), as at the moment, they are diagonal which does not look great.  For some reason, it also increases the height of the menu leaving empty space, which is not ideal, as the whole point of the "Mobile View" is to save space on the page.</p>
  
  <p>Any help to fix the alignment issues would be greatly appreciated.</p>
  
  <p>(The dropdown menu also aligns to the middle while in the "Mobile View", is there a way to align the dropdown sub-menu to the left side like the other items in the Mobile View?)</p>
  
  <p>CSS &amp; Html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta charset="UTF-8"&gt;
  
      &lt;!-- Load an icon library --&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
      &lt;!-- Change Navbar view if device has a small width --&gt;
      &lt;script&gt;
          function MobileNav() {
              var x = document.getElementById("myTopnav");
              if (x.className === "navbar") {
                  x.className += " responsive";
              } else {
                  x.className = "navbar";
              }
          }
      &lt;/script&gt;
  
      &lt;style&gt;
          html {
              color: white;
              margin: 0 auto;
              width: 90%;
              height: 90%;
          }
  
          .navbar, .holder, .dropdown, .dropbtn, dropdown-content {
              text-align: center;
          }
  
          /* Style the navigation bar */
          .navbar {
              width: 100%;
              background-color: #555;
              overflow: hidden;
          }
  
              /* Navbar links */
              .navbar a {
                  display: inline-block;
                  color: #f2f2f2;
                  text-align: center;
                  padding: 14px 16px;
                  text-decoration: none;
                  font-size: 17px;
              }
  
                  /* Navbar links on mouse-over */
                  .navbar a:hover {
                      background-color: #000;
                  }
  
          /* Current/active navbar link */
          .active {
              background-color: #4CAF50;
          }
  
  
          /* Hide the link that should open and close the navbar on small screens */
          .navbar .icon {
              display: none;
          }
  
  
          /*--------------------------------------------------------*/
          /* Related to Dropdown Menu */
  
          /* Show the dropdown menu when the user moves the mouse over the dropdown button */
          .dropdown:hover .dropdown-content {
              display: inline-block
          }
  
          /* Style the dropdown button to fit inside the navbar */
          .dropdown .dropbtn {
              font-size: 17px;
              border: none;
              outline: none;
              color: white;
              padding: 14px 16px;
              background-color: inherit;
              font-family: inherit;
              margin: 0;
          }
  
          /* Style the dropdown content (hidden by default) */
          .dropdown-content {
              display: none;
              position: absolute;
              background-color: #f9f9f9;
              min-width: 160px;
              box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
              z-index: 1;
          }
  
              /* Style the links inside the dropdown */
              .dropdown-content a {
                  float: none;
                  color: black;
                  padding: 12px 16px;
                  text-decoration: none;
                  display: block;
                  text-align: left;
              }
  
          /* Add a dark background on navbar links and the dropdown button on hover */
          .navbar a:hover, .dropdown:hover .dropbtn {
              background-color: #555;
              color: white;
          }
  
          /* Add a grey background to dropdown links on hover */
          .dropdown-content a:hover {
              background-color: #ddd;
              color: black;
          }
  
          /* Dropdown container - to position the dropdown content */
          .dropdown {
              display: inline-block;
              text-align: left;
              padding: 14px 16px;
              text-decoration: none;
              font-size: 17px;
          }
  
  
          /* When the screen is less than 680 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) */
          @media screen and (max-width: 680px) {
              /*Hide all menu's except for "Home"*/
              .navbar a:not(:first-child), .dropdown .dropbtn {
                  display: none; 
                  overflow:hidden;
              }
  
                  /* Align "Home" to left side*/
                  .navbar a:first-child {
                  float: left;
                  display: inline-block;
              }
  
              /* Align Mobile Navbar to right side*/
              .navbar a.icon {
                  float: right;
                  display: inline-block;
              }
          }
  
          /* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
          @media screen and (max-width: 680px) {
              .navbar.responsive {
                  position: relative;
              }
  
                  .navbar.responsive a.icon {
                      position: absolute;
                      right: 0;
                      top: 0;
                  }
  
                  .navbar.responsive a {
                      float: none;
                      display: block;
                      text-align: left;
                  }
  
                  .navbar.responsive .dropdown {
                      float: none;
                  }
  
                  .navbar.responsive .dropdown-content {
                      position: relative;
                  }
  
                  .navbar.responsive .dropdown .dropbtn {
                      display: block;
                      width: 100%;
                      text-align: left;
                  }
          }
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
      &lt;div class="navbar" id="myTopnav"&gt;
  
          &lt;div class="holder"&gt;
  
              &lt;a class="active" href="#"&gt;&lt;i class="fa fa-fw fa-home"&gt;&lt;/i&gt; Home&lt;/a&gt;
              &lt;a href="#"&gt;&lt;i class="fa fa-fw fa-search"&gt;&lt;/i&gt; Search&lt;/a&gt;
              &lt;a href="#"&gt;&lt;i class="fa fa-fw fa-envelope"&gt;&lt;/i&gt; Contact&lt;/a&gt;
              &lt;a href="#"&gt;&lt;i class="fa fa-fw fa-user"&gt;&lt;/i&gt; Login&lt;/a&gt;
  
              &lt;div class="dropdown"&gt;
                  &lt;button class="dropbtn"&gt;
                      Dropdown
                      &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
                  &lt;/button&gt;
                  &lt;div class="dropdown-content"&gt;
                      &lt;a href="#"&gt;Link 1&lt;/a&gt;
                      &lt;a href="#"&gt;Link 2&lt;/a&gt;
                      &lt;a href="#"&gt;Link 3&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;a href="javascript:void(0);" class="icon" onclick="MobileNav()"&gt;&amp;#9776;&lt;/a&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>