title: Resposive mobile navigation css
body: <p>Can anyone help me fix my responsive navigation. What CSS do I need to make the sub nav scroll down in mobile mode. Also the animation makes the nav hard to click on and when I resize the page the navigation does not return to its correct position. Help me please.</p>
  <p><a href="https://codepen.io/patriciaworth/pen/OJRBEbX" rel="nofollow noreferrer">https://codepen.io/patriciaworth/pen/OJRBEbX</a></p>
  <p>HTML</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;sub-nav.css&quot;&gt;
      &lt;!--Jquery--&gt;
      &lt;script src=&quot;js/jquery-3.4.1.min.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class=&quot;nav-container&quot;&gt;
      &lt;nav&gt;
          &lt;div class=&quot;container&quot;&gt;
              &lt;ul class=&quot;menu&quot;&gt;
                  &lt;li&gt;&lt;a href=&quot;index.php&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;about.php&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;hosts.php&quot;&gt;Hosts&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;membership.php&quot;&gt;Membership&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;affiliations.php&quot;&gt;Affiliations&lt;/a&gt;&lt;/li&gt;
                  &lt;!--dropdown--&gt;
                  &lt;li class=&quot;dropdown&quot;&gt;&lt;span class=&quot;sub-link&quot;&gt;Shop&lt;/span&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href=&quot;&quot;&gt;Products&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;&quot;&gt;My Account&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;&quot;&gt;Cart&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;&quot;&gt;Checkout&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;contact.php&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class=&quot;mobile-toggle&quot;&gt;&amp;#9776;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class=&quot;nav-underline&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;!--mobile nav toggle--&gt;
  &lt;script&gt;
      $(document).ready(function(){
          //mobile nav click event
          $(&quot;.mobile-toggle&quot;).click(function(){
              $(&quot;.menu&quot;).slideToggle();
          });
          $(&quot;.dropdown&quot;).click(function(){
              $(&quot;.dropdown ul&quot;).slideToggle();
          });
      });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>@import url(&quot;https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&amp;display=swap&quot;);
  @import url(&quot;https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&amp;display=swap&quot;);
  @import url(&quot;https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@300;400;500;600;700;800;900&amp;display=swap&quot;);
  * {
    margin: 0;
    padding: 0;
    text-decoration: none; }
  
  .container {
    min-width: 360px;
    max-width: 1080px; }
  
  .nav-container {
    width: 100%;
    background: #183153;
    background-image: linear-gradient(to right, #183153, #2e5d9e, #2e5d9e, #6190d1);
    position: relative;
    z-index: 10; }
  
  .nav-underline {
    height: 4px;
    background-image: linear-gradient(to right, #ffcb05, #ffcb05, #ffe066);
    animation-name: underlineToRight;
    animation-duration: 4s;
    animation-timing-function: ease-in;
    position: relative;
    z-index: 11; }
  
  @keyframes underlineToRight {
    from {
      width: 0; }
    to {
      width: 100%; } }
  nav ul {
    font-family: &quot;Dosis&quot;, sans-serif;
    font-size: 16px;
    line-height: 25px;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative; }
    @media only screen and (max-width: 1024px) {
      nav ul {
        position: absolute;
        top: 74px;
        left: 0px;
        background: #2e5d9e;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: none; } }
  nav ul &gt; li {
    display: inline-block; }
    @media only screen and (max-width: 1024px) {
      nav ul &gt; li {
        display: block;
        width: 100%;
        text-align: center; } }
  nav ul &gt; li &gt; ul {
    display: none;
    position: absolute;
    width: 160px;
    background: #2e5d9e; }
    @media only screen and (max-width: 1024px) {
      nav ul &gt; li &gt; ul {
        width: 100%;
        position: relative; } }
  nav ul &gt; li &gt; ul &gt; li {
    width: 100%; }
  nav ul &gt; li:hover ul {
    display: block; }
    @media only screen and (max-width: 1024px) {
      nav ul &gt; li:hover ul {
        display: none;
        width: 100%; } }
  nav ul li a,
  nav .sub-link {
    color: #ffffff;
    display: block;
    text-decoration: none;
    padding: 15px;
    box-sizing: border-box;
    text-transform: uppercase;
    transition: 0.3s;
    cursor: pointer; }
    nav ul li a:hover,
    nav .sub-link:hover {
      background: #c6c6cc;
      color: #183153; }
    @media only screen and (max-width: 1366px) {
      nav ul li a,
      nav .sub-link {
        font-size: 14px; } }
  @media only screen and (max-width: 1024px) {
    nav ul &gt; li {
      display: block;
      width: 100%;
      border-bottom: 1px solid rgba(204, 204, 204, 0.3); } }
  nav .mobile-toggle {
    color: #fff;
    padding: 25px 0px;
    text-align: right;
    right: 20px;
    display: none;
    cursor: pointer;
    position: relative; }
    @media only screen and (max-width: 1024px) {
      nav .mobile-toggle {
        display: block;
        width: 100%; } }
  </code></pre>