Responsywny navbar.

Question

Witam, mam problem z responsywnym menu. Wszystko działa, z jednym tylko wyjątkiem.Po kliknięciu na przycisk wyświetlają się wszystkie kategorie w jednej lini, a nie pod sobą:

Oto mój kod:
 

  <nav class="nav">
                <div class ="container">
                    <ul class="navbar">
                        <li><a href="#s1">Account</a></li>
                        <li><a href="#s2">About</a></li>
                        <li><a href="#s3">Something</a></li>
                        <li><a href="#s4">Contact</a></li>
                        <li class="icon"><a href="javascript:void(0);" onclick="responsiveNav()">&#9776;</a></li>
                    </ul>
                </div>
            </nav>

<script>
             function responsiveNav()
                {
                    document.getElementsByClassName("navbar")[0].classList.toggle("responsive");
                }
        </script>

I CSS:
 

.container
{
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.nav
{
    line-height: 75px;
    background-color: #4b78a0;
    position: sticky;
    top: 0;
    z-index: 500;
}

    .nav ul
    {
        display: flex;
        justify-content: space-between;
        list-style: none;
    }

        .nav li
        {
            width: 100%;
        }
            .nav a
            {
                    display: block;
                    text-align: center;
                    color: #fff;
                    text-decoration: none;
            }
            
                .nav a:hover, .nav a:focus
                {
                    background-color: #375875;
                }
                
          .nav li.icon
          {
              display: none;
          }
                
                @media screen and (max-width:680px)
                {
                            ul li:not(:first-child)
                            {
                                display: none;
                            }
                            ul li.icon
                            {
                              float: right;
                              display: inline-block !important;
                              width: 30%;
                            }
                                    ul.responsive li.icon
                                    {
                                      position: absolute;
                                      right: 0;
                                      top: 0;
                                    }
                                    ul.navbar.responsive li 
                                    {
                                      float: none !important;
                                      display: list-item !important;
                                    }
                                    
                                    
                }

Próbowałem bawić się już z Narzędziami developerskimi, !important itp, nie wiem w którym miejscu jest błąd.
Z góry Dziękuję za pomoc.
Pozdrawiam!

Answer 1

Szerokość elementów na 100%.

Edit: Przyjrzałem się dokładniej temu menu i wystarczy dodać w @media ul.navbar{display:block;}. Poza tym javascript jest użyty w możliwie najgorszy sposób https://kornel.ski/onclick

Comments

Dziękuję za odpowiedź! Pomogło :) Zmienię także ten javascript, masz racje, po prostu bezmyślnie skopiowany.