浮动菜单与@Media

我正在开发一个web应用程序，我想创建一个浮动菜单，它保持固定并浮动在顶部，当到达的宽度为min-width: 340px和max-width:640px时，我给display: block;菜单出现，但菜单没有出现。浮动菜单与@Media

菜单出现在页面的顶部，但不会出现

@media screen and (min-width: 340px) and (max-width:640px) { 
 
    #imagem_principal { 
 
    width: 100%; 
 
    margin-left: 210px; 
 
    } 
 
    .busca { 
 
    margin-top: 80px; 
 
    margin-left: 110px; 
 
    position: relat??ive; 
 
    } 
 
    #campo_busca { 
 
    width: 230px; 
 
    } 
 
    .menu_superior { 
 
    display: none; 
 
    } 
 
    .header-fixed { 
 
    display: block; 
 
    } 
 
    .menu_2 { 
 
    display: none; 
 
    } 
 
    .header-fixed { 
 
    background-color: #CCC; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 999; 
 
    width: 100%; 
 
    display: none; 
 
    background-color: #6495ED; 
 
    border-bottom: 1px solid #000; 
 
    height: 37px; 
 
    font-size: 20pt; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="header-fixed"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-4 col-sm-4 text-left"> 
 
     <a class="fa fa-home"></a> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 text-center"> 
 
     <a class="fa fa-user"></a> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 text-right"> 
 
     <a class="fa fa-shopping-cart"></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-10-15 Felipe

你必须显示：无在.header-fiixed.css你把显示器后：块上面，因此被取消出来 –

你在你的CSS使用display:none;为.header-fixed这个隐藏你的头。只要删除它，它就会出现。

@media screen and (min-width: 340px) and (max-width:640px) { 
 
    #imagem_principal { 
 
    width: 100%; 
 
    margin-left: 210px; 
 
    } 
 
    .busca { 
 
    margin-top: 80px; 
 
    margin-left: 110px; 
 
    position: relative; 
 
    } 
 
    #campo_busca { 
 
    width: 230px; 
 
    } 
 
    .menu_superior { 
 
    display: none; 
 
    } 
 
    .header-fixed { 
 
    display: block; 
 
    } 
 
    .menu_2 { 
 
    display: none; 
 
    } 
 
    .header-fixed { 
 
    background-color: #CCC; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 999; 
 
    width: 100%; 
 
    background-color: #6495ED; 
 
    border-bottom: 1px solid #000; 
 
    height: 37px; 
 
    font-size: 20pt; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="header-fixed"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-4 col-sm-4 text-left"> 
 
     <a class="fa fa-home"></a> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 text-center"> 
 
     <a class="fa fa-user"></a> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 text-right"> 
 
     <a class="fa fa-shopping-cart"></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-10-15 16:43:23

浮动菜单与@Media

回答

相关问题