title: size and vertical center navbar items relative to logo image
body: <p>I am trying to size a navbar logo on the left side of the horizontal navbar and then have the rest of the navbar items take the same vertical space and be vertically centered in the space.  The navbar items currently do not use the full vertical space.  Every sizing attribute that I've tried has created another problem.  Thanks for all help.</p>
  
  <p>Note:  Can't use bootstrap.  Wish I could.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/****************************************/
  /* Fixed top navbar with dropdowns      */
  /****************************************/
  .m-navbar ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      border: 1px solid #e7e7e7;
      background-color: #f3f3f3;
  }
  
  /*.m-navbar li {
      float: left;
  }*/
  
  .m-navbar-right {
   float: right;
  }
  .m-navbar-left {
   float: left;
  }
  
  .m-navbar li a, .m-menu-form {
      display: inline-block;
      color: black;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      border: none;
      font-size: 100%;
      font-family: "Lato", sans-serif; 
  }
  
  .m-navbar li a:hover:not(.active), .m-dropdown:hover, .m-menu-form:hover {
      /*background-color: #ddd;*/
      background-color: #9dd0f0;
  }
  
  .m-navbar-logo-img {
   padding: 3px 0px 4px 4px;
   width: auto;
   max-height: 33px;
   position: relative;
  }
  
  .m-navbar li a.active {
      color: white;
      background-color: #00719c;
  }
  
  .m-navbar li.m-dropdown {
   display: inline-block;
  }
  
  .m-dropdown-content {
   display: none;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;meta charset="ISO-8859-1"&gt;
   &lt;link rel="stylesheet" href="navbar.css"&gt;
   &lt;title&gt;Navbar Problem&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div class="m-outer"&gt;
    &lt;div class="m-fixed-header"&gt;
    &lt;div class="m-navbar"&gt;
        &lt;ul&gt;
       &lt;li class="m-navbar-left"&gt;&lt;a href="#"&gt;&lt;img class="m-navbar-logo-img" src="bugicon.png"&gt;&lt;/img&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li class="m-navbar-left"&gt;
        &lt;form name="idForm" method="post" action=""&gt;
            &lt;input type="submit" name="action" class="m-menu-form" value="Home"&gt;
        &lt;/form&gt;
          &lt;/li&gt;
       &lt;li class="m-dropdown m-navbar-left"&gt;
        &lt;a href="javascript:void(0)" class="m-dropbtn"&gt;Menu 1&lt;/a&gt;
        &lt;div class="m-dropdown-content"&gt;
         &lt;a href="#"&gt;Drop 1&lt;/a&gt;&lt;br&gt;
         &lt;a href="#"&gt;Drop 2&lt;/a&gt;&lt;br&gt;
         &lt;a href="#"&gt;Drop 3&lt;/a&gt;&lt;br&gt;
        &lt;/div&gt;
       &lt;/li&gt;
       &lt;li class="m-dropdown m-navbar-left"&gt;
        &lt;a href="javascript:void(0)" class="m-dropbtn"&gt;Menu 2&lt;/a&gt;
        &lt;div class="m-dropdown-content"&gt;
         &lt;a href="#"&gt;Drop 1&lt;/a&gt;&lt;br&gt;
         &lt;a href="#"&gt;Drop 2&lt;/a&gt;&lt;br&gt;
         &lt;a href="#"&gt;Drop 3&lt;/a&gt;&lt;br&gt;
         &lt;a href="#"&gt;Drop 4&lt;/a&gt;&lt;br&gt;
        &lt;a href="#"&gt;Drop 5&lt;/a&gt;&lt;br&gt;
        &lt;/div&gt;
       &lt;/li&gt;
       &lt;li class="m-navbar-right"&gt;&lt;a href='#'&gt;Logoff&amp;nbsp;&amp;nbsp;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
   
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>