响应菜单图标问题

Question

I have an issue. I have a menu but I want to make it responsive with a button click ( font awesome) when i set display:none; and then display:block on the media query , my icon doesn't appear.. pls help.

html:

<div id="menuIcon">
                       <i class="fa fa-bars fa-3x" style="color:white"></i>
  </div>

css:

@media screen and (min-width:320px) and (max-width:640px){
   .menuRight{
       display:none;
   }

   #menuIcon{
       display:block;
       float:right;
       cursor:pointer;
   }
}

#menuIcon{
    display:none;
}

Answer 1

In your above code, the display:none; is below the display:block; so it is overriding it. Organize your code like this and it will work:

#menuIcon{
    display:none;
} 

@media screen and (min-width:320px) and (max-width:640px){
   .menuRight{
   display:none;
 }

 #menuIcon{
   display:block;
   float:right;
   cursor:pointer;
 }
}

Also, see this on cascading: https://css-tricks.com/specifics-on-css-specificity/

Answer 2

Maybe just try to set display: block; as !important .

Answer 3

If you add style to an element twice in your CSS file, CSS gives higher priority to the code added at the last.

eg

.box { color: #fff; }
.box { color: #000; }

The property of .box will be color: #000; since it was added at the last.

Just change your code to the following:

#menuIcon{
    display:none;
}

@media screen and (min-width:320px) and (max-width:640px){
   .menuRight{
       display:none;
   }

   #menuIcon{
       display:block;
       float:right;
       cursor:pointer;
   }
}