@9CB5
Posted
The display: none in .menuList takes precedence over the .displayMenu class that you toggle when you click the button. So the menu will never show. There are two ways you can solve this:
1.) Hacky but quicker way. Add an !important keyword to display: block inside the .displayMenu class. But bear in mind this is bad practice as you're bypassing the natural order of precedence of your CSS.
2.) Modify the display: none in .menuList using JS with something like menu.style.display = "block" when the hamburger is clicked.
Marked as helpful
@kxnzx
Posted
@9CB5 Hello Chris, thank you for your clear explanation. I choose to solve it with your second solution, it works now! Much appreciated! :)
At the time I finished the CSS I realized that it was unnecessary for me to wrap the <ul class="menuListItems"> inside the <div class="menuList">. I didn't want to correct it, because it would mess up the whole layout. Is this where it went wrong with the precedence? In other words if I did not have the <div class="menuList"> wrapped around <ul class="menuListItems"> would this prevented me from having this issue?
@9CB5
Posted
@kxnzx No, because the issue lies in <div class="menuList"> which is the parent element.
When the hamburger button is clicked, the statement above becomes <div class="menuList displayMenu">
So now, you have two competing classes in your menu, and whichever class that is declared last in your css file takes precedence.
In your css file, .displayMenu and .menuList is declared at line 102 and 105 respectively. So .menuList takes precedence.
Marked as helpful
@kxnzx
Posted
@9CB5 I replaced the .displayMenu below .menuList so that .displayMenu takes precedence, this however also did not work.
@9CB5
Posted
@kxnzx You have modified your SASS file but forgot to compile it to CSS. It should work once you've done this :)
