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>
答案 0 :(得分:1)
您只需将display:none;
分配给id="menu-icon"
并使用以下媒体查询将显示从display:block;
更改为id="menu-icon"
到移动设备中的#menu-icon{
display:none;
}
@media (min-width:728px) {
#menu-icon{
display:block;
}
}
<div class="tree">
<div></div>
<img src="File path" alt="" />
答案 1 :(得分:0)
尝试使用媒体查询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;
}
}