title: My fa fa-bars is not showing - Responsive Top Navigation
body: <p>So I'm switching up my gears a bit here. I created a <strong>responsive nav bar</strong> for my menu, but unfortunately it is not showing the title in the menu bar when it is in mobile form. For my nav bar update, I copied and pasted the codes from W3schools and then modify it a little. I plan to change the color later.</p>
  
  <p>Right now, the only problem I have is that the <strong>fa fa-bars</strong> is not showing when I go into responsive mode. <strong>Why is that?</strong> Here is where I got the responsive nav bar from. <a href="https://www.w3schools.com/howto/howto_js_topnav_responsive.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_js_topnav_responsive.asp</a>.</p>
  
  <p>Tell me what am I missing. Thanks. <em>You can run the code snippet below to see what I'm talking about.</em></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>.topnav {
    overflow: hidden;
    background-color: #333;
  }
  
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .active {
    background-color: #4CAF50;
    color: white;
  }
  
  .topnav .icon {
    display: none;
  }
  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
      display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {
      position: relative;
    }
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }</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="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Homepage&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;!-- The navigation menu --&gt;
  
    &lt;div class="topnav" id="myTopnav"&gt;
      &lt;a href="#home" class="active"&gt;Home&lt;/a&gt;
      &lt;a href="about.html"&gt;About Me&lt;/a&gt;
      &lt;a href="portfolio.html"&gt;Portfolio&lt;/a&gt;
      &lt;a href="contact.html"&gt;Contact&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;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong><em>FOR REPLY</em></strong></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>.topnav {
    overflow: hidden;
    background-color: #333;
  }
  
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .active {
    background-color: #4CAF50;
    color: white;
  }
  
  .topnav .icon {
    display: none;
  }
  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
      display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {
      position: relative;
    }
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }
  
  
  /* This is the part that messed up my styling for my home page which 
      which I previously was pleased with before. */
  
  .summary {
    min-height: 75vh;
    max-width: 2000px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .profilePicture {
    padding: 2rem;
  }
  
  .profileSummary {
    max-width: 400px;
  }</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="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Homepage&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="topnav" id="myTopnav"&gt;
      &lt;a href="#home" class="active"&gt;Home&lt;/a&gt;
      &lt;a href="about.html"&gt;About Me&lt;/a&gt;
      &lt;a href="portfolio.html"&gt;Portfolio&lt;/a&gt;
      &lt;a href="contact.html"&gt;Contact&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;
  
  
  
    &lt;span&gt;
      &lt;div class="summary"&gt;
        &lt;div class="profilePicture"&gt;
          &lt;img src="https://ih1.redbubble.net/image.464384650.8618/flat,550x550,075,f.jpg" style="width: 170px; height: 170px; border-radius:50%;"&gt;
        &lt;/div&gt;
        &lt;div class="profileSummary"&gt;
          Attentive alas because yikes due shameful ouch much kookaburra cantankerously up unbridled far vulnerably climbed aristocratically hired brusque fox said the therefore terrier scallop innocent on goodness mongoose woolly showed insistently
          and.
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/span&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>