Technical Documentation Page (Display: none problems))

HTML-CSS
1

I’m making a Hamburger menu for mobile, but when I set display none for this menu icon in desktop screens (which is the size of my global settings) it disappears in mobile screens too;

I have tried to use display block for this icon at the mobile media query but it didn’t work.

How do I solve this problem?

My code (I used a div #mobile to place the menu icon): https://codepen.io/danielasegadilha/pen/jOpjGwR

2

Remember, with CSS, it can sometimes depend on which rule set comes first in the file. For example, if two rule sets have the same specificity then the one that comes later in the file will win. Media queries do not change the specificity. So you generally want to put your media queries toward the end of the file so that they will override the default values.