title: Responsive Navigation Bar - Drop down Symbol Moving upon Click
body: <p>I'm working on creating a responsive navigation bar with a dropdown menu taking the place of the "home, about, services, etc." menu options. I am going off of <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav" rel="nofollow noreferrer">this W3Schools example</a>. </p>
  
  <p>My problem is that the <code>fa-caret</code> dropdown icon is showing right next to my logo (on screens less than 750px), but when I click the icon, it jumps to the right side of the page.</p>
  
  <p>I've tried separating the dropdown options into divs and using a flexbox and floating the icon, and nothing seems to be working. I need to have the company logo on the left side and would like the menu to remain fixed on the right side.</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>body {
    margin: 0;
    background: rgb(17, 58, 93);
  }
  
  * {
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
    font-family: 'Lato', sans-serif;
  }
  
  
  /* Social Nav */
  
  .social-nav {
    height: 25px;
    background: rgb(255, 231, 113);
    position: fixed;
    width: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .social-nav-text {
    font-size: 14px;
    color: rgb(17, 58, 93);
    font-family: 'Montserrat', sans-serif;
  }
  
  .social-nav-text a {
    text-decoration: none;
    color: rgb(17, 58, 93);
  }
  
  .social-nav-icon {
    height: 12px;
    margin: auto 5px;
  }
  
  .social-nav-social {
    margin: 0 auto 0 25px;
    display: none;
  }
  
  .social-nav-phone {
    margin: 0 25px 0 auto;
  }
  
  
  /* Main Nav */
  
  .main-nav {
    overflow: hidden;
    position: fixed;
    z-index: 1;
  }
  
  .main-nav a {
    float: left;
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 14px;
  }
  
  .main-nav-logo {
    height: 95px;
    margin-top: 35px;
  }
  
  .main-nav a:hover {
    color: rgb(255, 231, 113);
    font-weight: bold;
  }
  
  .main-nav a.active {
    color: rgb(17, 58, 93);
  }
  
  .main-nav .icon {
    display: none;
    margin-top: 90px;
  }
  
  
  /* Mobile Style */
  
  @media only screen and (max-width: 400px) {
    .main-nav a:not(:first-child) {
      display: none;
    }
    .main-nav a.icon {
      float: right;
      display: block;
    }
    .main-nav.responsive {
      position: relative;
    }
    .main-nav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .main-nav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }
  
  
  /* Tablet Style */
  
  @media only screen and (min-width: 401px) and (max-width: 750px) {
    .main-nav a:not(:first-child) {
      display: none;
    }
    .main-nav a.icon {
      float: right;
      display: block;
    }
    .main-nav.responsive {
      position: relative;
    }
    .main-nav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .main-nav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }
  
  
  /* Desktop Style */
  
  @media only screen and (min-width: 751px) {
    /* Social Nav */
    .social-nav {
      height: 35px;
    }
    .social-nav-text {
      font-size: 16px;
    }
    .social-nav-icon {
      height: 14px;
    }
    .social-nav-social {
      display: flex;
    }
    /*Main Nav */
    .main-nav-logo {
      margin: 50px auto auto 25px;
    }
    .main-nav-page {
      margin-top: 100px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="social-nav"&gt;
    &lt;div class="social-nav-social"&gt;
      &lt;p class="social-nav-text"&gt;&lt;i&gt;FOLLOW US! &lt;a href="http://instagram.com/profeservice" target="_blank"&gt; &lt;img class="social-nav-icon" src="images/icons/instagram-icon.png" alt="Instagram" /&gt; /profeservice&lt;/a&gt; &lt;a href="https://www.facebook.com/The-Service-Professional-110770558329" target="_blank"&gt; &lt;img class="social-nav-icon" src="images/icons/facebook-icon.png" alt="Facebook" /&gt; /The-Service-Professional&lt;/a&gt;&lt;/i&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="social-nav-phone"&gt;
      &lt;p class="social-nav-text"&gt;&lt;i&gt;Call us now! &lt;a href="tel:+18055241526"&gt;&lt;img class="social-nav-icon" src="images/icons/telephone-icon.png" alt="Telephone" /&gt;(805) 524-1526&lt;/a&gt;&lt;/i&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="main-nav" id="main-navigation"&gt;
    &lt;a href="" class="active"&gt;&lt;img class="main-nav-logo" src="images/logo/Logo.svg" alt="Logo" /&gt;&lt;/a&gt;
    &lt;a href="" class="main-nav-page"&gt;Home&lt;/a&gt;
    &lt;a href="about.html" class="main-nav-page"&gt;About&lt;/a&gt;
    &lt;a href="services.html" class="main-nav-page"&gt;Services&lt;/a&gt;
    &lt;a href="products.html" class="main-nav-page"&gt;Products&lt;/a&gt;
    &lt;a href="contact.html" class="main-nav-page"&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;script type="text/javascript"&gt;
    function myFunction() {
      var x = document.getElementById("main-navigation");
      if (x.className === "main-nav") {
        x.className += " responsive";
      } else {
        x.className = "main-nav";
      }
    }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I expect the dropdown icon to remain fixed on the right side of the page, whether or not it's active.</p>