浮動菜單與@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

回答

相關問題