スクロール後に変な位置に移動するタイトルをcssのpositionで直す(wp rootstrapテーマ)


.navbar.navbar-default {
background-color: #fff;
font-weight: 200;
margin-bottom: 0;
margin-top: -2px;
border-bottom: 1px solid #eee;
position: relative;
z-index:999999;
width: 100%;
}

ヘッダーやグローバルナビが入っている部分のコードは、上記の通りです。CSSのpositionとかで、変な位置に移動というのがあったので、そのへんを中心に見てみます。

修正してみたCSS


.navbar.navbar-default {
top:0px;
background-color: #fff;
margin-bottom: 0;
border-bottom: 1px solid #eee;
position: fixed;
z-index: 6;
width: 100%;
}

ヘッダーのメニュー辺りの『position:relative』を『fixed（固定）』に。スクロールしても位置が固定される要素（バナーなど）によく使われます。固定メニューにするならこれが良いかなと。

あと、『スクロールするときと、一番上まで戻したとき』に、1～2ピクセルくらい文字が動くようなのも見られたので、気になる方は『top:0』をつけて、上から動かないようにします。