title: HTML/CSS Responsive NavBar and Alignment
body: <p>I am working to create a NavBar very similar to Apple's from scratch in order to learn HTML. Here is what I have so far after reading a book and pulling from a few online sources to try and properly format it. I am having difficulty vertically aligning the menu items inside the NavBar itself so they are not lower than center... Same with the logo at the beginning (is there a different way I should be handling this logo? Also I changed the logo file name because it wouldn't be of use here but I didn't want to remove the line from my code.)</p>
  
  <p>Besides centering the text vertically, I also do not know how to center the text items and logo when the menu is open during the mobile view's activation. I thought inline would work but that does not seem to work within my code.</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-js lang-js prettyprint-override"><code>function myFunction() {
      var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
          x.className += " responsive";
      } else {
          x.className = "topnav";
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .topnav {
    overflow: hidden;
    background-color: #333;
    text-align:center
  }
  
  .topnav a {
    display: inline-block;
    color: #fff;
    text-align: justify;
    text-decoration: none;
    font-size: 15px;
    font-weight: lighter;
    transition : 0.3s;
    padding: 0;
    margin: 0px 60px 0px 60px;
    list-style-type: none;
    line-height: 30px;
  }
  
  .topnav a:hover {
    color: #4286f4;
  }
  
  .active {
    background-color: #333;
    color: #4286f4;
  }
  
  .topnav .icon {
    display: none;
  }
  
  @media screen and (max-width: 800px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: left;
      display: flex;
      position: absolute;
      left: 0;
      top: 9px;
    }
  }
  
  @media screen and (max-width: 800px) {
    .topnav.responsive {position: static}
    .topnav.responsive .icon {
      position: absolute;
      left: 0;
      top: 9px;
    }
    .topnav.responsive a {
      float: left;
      display: inline;
      text-align: center;
      line-height: 100px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="style.css" media="screen" /&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      
  &lt;div class="topnav" id="myTopnav"&gt;
    &lt;a href="#"&gt;&lt;img src="Images/Logo.png"width="30" height="30"&gt;&lt;/a&gt;
    &lt;a href="#home"&gt;Home&lt;/a&gt;
    &lt;a href="#news"&gt;News&lt;/a&gt;
    &lt;a href="#contact"&gt;Contact&lt;/a&gt;
    &lt;a href="#about"&gt;About&lt;/a&gt;
    &lt;a href="javascript:void(0);" class="icon" onclick="myFunction()"&gt;
      &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
    &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can't seem to figure this out as I started learning HTML/CSS one week ago and every time I seem to alter one thing another problem appears in its place...</p>
  
  <p>I can edit in my site's domain name if needed, and please refer to Apple.com to get a feel for what I am aiming to create.</p>
  
  <p>Thanks.</p>