Как скрыть кнопку меню на веб-странице рабочего стола?

Question

Я использую «menu-icon» в качестве кнопки для navbar ссылок для мобильной версии. У меня проблема с настольной версией, не знаете, как скрыть кнопку от нее?

<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>

Answer 1

вы просто назначаете display:none; на id="menu-icon" и измените отображение на блок display:block; на id="menu-icon" в мобильном устройстве с помощью медиазапроса, как показано ниже

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

Answer 2

попробуйте медиа-запрос css, чтобы скрыть кнопку рабочего стола

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

попробуйте этот код

@media (min-width:1025px) 
{ 
   #menu-icon
   { 
     dispay: none;
   }
}