hamburger menu poniżej 1024 a powyżej normalne

Question

Dzień dobry

Mam kolejny problem, z którym nie potrafię sobie poradzić. Mam zrobione hamburger menu, które wyjeżdża z lewej strony i jest tam lista li z 4 linkami. Tę samą listę chciałbym zrobić w poziomym pasku na górze strony. Menu na pasku miałoby się wyświetlać od rozdzielczości 1024px. Wpisałem w @media(min-width: 1024px) display: none dla burgera i on znika, ale po wpisaniu display: inline-block dla li menu nie jest widoczne. Co robię źle?

<section class="header">
        <span>name</span>
        <div class="burger">
            <i class="fas fa-bars show"></i>
            <i class="fas fa-times"></i>
        </div>
        <aside>
            <nav>
                <ul>
                    <li><a href="">o mnie</a></li>
                    <li><a href="">oferta</a></li>
                    <li><a href="">galeria</a></li>
                    <li><a href="">kontakt</a></li>
                </ul>
            </nav>
            <div class="logo"></div>
        </aside>
    </section>

.burger {
    position: absolute;
    top: 15px;
    right: 15px;
}

.burger:hover {
    cursor: pointer;
}

span {
    position: absolute;
    left: 15px;
    top: 15px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
}

aside {
    position: absolute;
    top: 46px;
    bottom: 0;
    left: -100vw;
    width: 100vw;
    transition: .3s linear;
    background-color: white;
    z-index: 1;
}

ul {
    list-style: none;
}

li {
    text-align: center;
    margin-top: 20px;
}

a {
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    color: black;
    transition: .2s linear;
}

a:hover {
    border-bottom: 2px solid black;
}

.logo {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    transform: translate(-50%, 80%);
    background-image: url(../img/interior_small.png);
    background-position: center;
    background-size: cover;
}

.fas {
    display: none;
    color: black;
}

i.show {
    display: block;
}

aside.show {
    left: 0;
}

const burger = document.querySelector(".burger");

const iconBurger = document.querySelector(".fa-bars");
const iconX = document.querySelector(".fa-times");
const column = document.querySelector("aside");


burger.addEventListener("click", function() {
    iconBurger.classList.toggle("show");
    iconX.classList.toggle("show");
    column.classList.toggle("show");
})

 

Answer 1

Jeżeli chcesz pokazać menu to musisz wyzerować left dla aside który jest na minusie.

@media (min-width: 1024px) {
  aside{
      left: 0;
  }
}