1
ウェブアプリケーションを開発していて、幅がmin-width: 340px
とmax-width:640px
になったときにフローティングメニューを固定してフローティングにするフローティングメニューを作成したい場合は、メニューが表示されるようにdisplay: block;
メニューは表示されません。@Mediaを使ったフローティングメニュー
メニューは、ページの上部に表示されていますが、これはあなたのヘッダーを隠し.header-fixed
のためにあなたのCSSのdisplay:none;
を使用している
@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>
あなたは、ディスプレイがあります。それはそれを相殺されるので、それ以上のブロック:あなたは、ディスプレイを入れた後、あなたの.header-fiixed.cssでどれを –