Menu hamburger - ikona hamburgera i "iksa" wyświetla się jednocześnie

Question

Staram się stworzyć standardowe wysuwane menu, tak aby był widoczny hamburger, a po kliknięciu wysunęło się menu. Jednocześnie, żeby ikona zminiła się na iksa. 

Dodawanie klas w JS działa prawidłowo. Wydaje mi się, że zrobiłem coś nie tak z HTML/CSS. Czy mógłby ktoś rzucić okiem? 

https://codepen.io/grzegorz-kondracki/pen/wLjXvL

Answer 1

Błąd leży w tym kawałku kodu css:
 

.burger.fas {
    display: none;
}

.burger.fas.show {
    display: block;
}

 

.burger.fas i burger.fash.show złapie elementy, które mają wszystkie te 3 klasy np.:
 

<div class="burger fas show">
...
</div>

u Ciebie jednak .fas.show, jest dzieckiem klasy .burger, zatem Twóje selektory powinny wyglądać następująco:
 

.burger .fas {
    display: none;
}

.burger .fas.show {
    display: block;
}

Powyższy zapis oznacza, że pod uwage zostaną wzięte wszystkie elementy z klasą .fas/.fas i .show, które są dzieckiem elementu z klasą .burger.

Pozdrawiam

Comments

Dzięki!