Как сделать чтобы при определенном разрешении экрана список убирался и добавлялся burger?

Question

[kaidos]

Мой код:

<header class="header">
                <a href="" class="header__logo">
                    <img src="img/Logo.png" alt="">
                </a>
                <div class="header__menu">
                    <ul class="nav">
                        <a href="#">Home</a>
                        <a href="#">Portfolio</a>
                        <a href="#">Pages</a>
                        <a href="#">Blog</a>
                    </ul>
                    <div class="nav__burger__wrapper">
                        <a href="#" class="nav__burger"><i class="fas fa-bars"></i></a>
                    </div>
                </div>
                <div class="header__btn">
                    <a href="#" class="btn__sign-in">Sign In</a>
                    <a href="#" class="btn__login">Login</a>
                </div>
            </header>

.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 35px 0;
    border-bottom: 1.5px solid #EFEEF3;
    width: 100%;
}

.header__menu{
    width: 30%;
}
.header__menu > .nav__burger__wrapper{
    display: none;
}
.header__menu > ul.nav{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.header__menu > ul.nav > a{
    color: #16133D;
    font-family: "RobotoMedium";
    transition: .3s ease;
}
.header__menu > ul.nav > a:hover{
    color: #7690A8;
    transition: .3s ease;
}

@media screen and (max-width: 1024px){
    .header__menu > ul.nav{
        display: none;
    }
    .header__menu > .nav__burger__wrapper{
        display: block;
    }
}

Почему он не работает?

Comments

[approximate solution]

Потому что вы даже такую базовую вещь как оформление кода не научились делать, куда уж бургер осилить.

Answer 1

[approximate solution]

https://codepen.io/mutedblues/pen/MmPNPG
Анализируйте код, и ищите ошибку.

Answer 2

[Михаил Мингареев]

почитай про препроцессоры, будет полезно, а в данном случае просто убери из ".header__menu > .nav__burger__wrapper" символ ">" (и в основных стилях и в медиа-запросе)