bootstrapのnavbar-brandをレスポンシブで表示した際に位置がずれてしまう

Question

bootstrapのnavbar-brandをレスポンシブで表示した際に位置がずれてしまうのですが、なぜでしょうか。トップにもっていきたいです。

     <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#"></a>
            </div>

.navbar-brand{
width: 255px;
height:70px;
background-image: url(../assets/assets/img/banner.png);
background-size: cover;
margin-right: 50px;}

@media (width: 768px) {
.navbar-brand{
width: 50px;
height:20px;
background-image: url(../assets/assets/img/banner.png);
background-size: cover;
position:fixed;
}

Answer 1

top を指定していないからではないですか？

bottom も auto であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。

top - CSS: カスケーディングスタイルシート | MDN

Comments

[NAHUM]

top:0;に指定しても変化なしでした…ありがとうございましたm(_ _)m

[Lhankor_Mhy]

@media (width: 768px) {
↑これは修正しましたか？