简体   繁体   中英

How to hide a menu button from desktop webpage?

I use the "menu-icon" as a button for navbar links for mobile version. I have a problem with desktop version, not sure how to hide the button from it?

<div class="drp">  //the all navigation bar from mobile version
    <button id="menu-icon"></button> //links button for mobile version
    <div class="drp-cont">  //that is for navigation links from mobile version
        <nav>
               <ul>
                    <li><a href="games.html">Games</a></li>
                    <li><a href="#footer" class="con">Contact</a></li>
                    <li><a href="#" class="sh">Shop</a></li>
                    <li><a href="#" class="active">Home</a></li>

             </ul>
        </nav>
    </div>

you just assign display:none; to the id="menu-icon" and change the display to block display:block; to the id="menu-icon" in mobile device using Media query like below

#menu-icon{
  display:none;
}
@media (min-width:728px) { 
   #menu-icon{
     display:block;
   }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM