2017-10-15 6 views
1

ウェブアプリケーションを開発していて、幅がmin-width: 340pxmax-width:640pxになったときにフローティングメニューを固定してフローティングにするフローティングメニューを作成したい場合は、メニューが表示されるようにdisplay: block;メニューは表示されません。@Mediaを使ったフローティングメニュー

メニューは、ページの上部に表示されていますが、これはあなたのヘッダーを隠し.header-fixedのためにあなたのCSSのdisplay:none;を使用している

enter image description here

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

+0

あなたは、ディスプレイがあります。それはそれを相殺されるので、それ以上のブロック:あなたは、ディスプレイを入れた後、あなたの.header-fiixed.cssでどれを –

答えて

0

表示されません。ただそれを削除すると、それが表示されます。

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

関連する問題