如何适配移动端导航栏？现有代码用@media等方法未奏效求解决

我一直尝试让当前导航栏适配移动端，通过观看视频尝试了@media、汉堡菜单等多种方法，但均未奏效，除非重写HTML以匹配示例代码。

原始HTML代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Waverly Farm: Home</title>
        <link href="style.css" rel="stylesheet"/>
    </head>
    <body>
        <header class = "header">
            <div class = "logo">Waverely Farm</div>
            <nav class = "navbar">
                <a href ="index.html">Home</a>
                <a href ="about_us.html">About Us</a>
                <a href ="services.html">Services</a>
                <a href ="shop.html">Shop</a>
                <a href ="contactus.html">Contact Us</a>
            </nav>
        </header>
    </body>
</html>

现有CSS代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 100px;
    background-color: aquamarine;
    display:flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}
.logo{
    font-size: 32px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}
.navbar a{
    position: relative;
    font-size: 18px;
    color: #fff;
    font-weight: 400;
    text-decoration: none;
    margin-left: 40px;
}

.navbar a::before{
    content:'';
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 2px;
    background: #fff;
    transition: .3s;
}

.navbar a:hover::before{
    width: 100%;
}

内容的提问来源于stack exchange，提问作者THE GM