ブートストラップ３を使って自作テーマ作成（２３）画面を左右にスライドさせるボタンのCSS設定

ブートストラップ３のサンプルoffcanvasに設定されていたウィンドウサイズを小さくした際に表示される”Toggle nav”ボタンのCSS設定を行います。

表示位置を変更

　
現状の表示位置がサイトタイトルヘッダー部の上部で、記事本文と離れていて目立たなく使いづらいので、記事本文に近い位置に移動します。
　
header.phpを以下のように変更します。
・header.phpの最下部に移動
・ボタンの名前を”Toggle nav”から”左右にスライド”に変更
・CSSの設定をするため、id=”toggle-nav”を追加

  <div class="row row-offcanvas row-offcanvas-right">
<p id="toggle-nav" class="pull-right visible-xs">
  <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">左右にスライド</button>
</p>

　

CSS設定

　
表示位置をサイトヘッダーの下に移動すると記事のタイトル部分が下記のようにz-indexが設定されていて、記事タイトル領域の下に隠れてしまいます。
.entry-header {
　position: relative;
　z-index: 1;
}
　
最表面に表示されるようにz-indexに大きい数値を指定します。下記設定を追加しました。

#toggle-nav {
        z-index: 5;
        position: relative;
}

これでウィンドウサイズが小さくなって右サイドバーが隠れてしまっても、記事タイトル付近に”左右にスライド”のボタンが表示され、ボタンを押下すると左右にスライドして隠れている部分を見やすく出来ました。
　
「ブートストラップ３を使って自作テーマ作成」の目次へ