Glacial Webwork : 駆け出し未満のデザイナー(自称)のお勉強ブログ。

BootStrapのnavbar-toggleを少しいじる

Webサイトのデザインをする際に私はよくBootStrapを使用しています。
技術が稚拙な私にとって、レスポンシブのサイトを作る上で大変重宝しています。

Bootstrapのnavbar-toggleカスタマイズ

navbar-toggleって何ぞや・・・って人のために。所謂、ハンバーガーメニューと言われています。スマートフォン向けのサイトでよく見る、3本線のやつです。
クリックするとメニューがにゅ~!って出てくるのが定番ですね。

1.bootstrap.cssの.navbar-toggleを探す

上と右と下の余白を消す場合はmarginを0に変更する。

.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 9px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}

ここのmarginを0pxに変更します。

.navbar-toggle {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

2.ハンバーガーの大きさを変更する

.navbar-toggle .icon-bar {
display: block;
width: 20px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 8px;
}

ここの部分を変更します。
.navbar-toggle .icon-barでハンバーガーの線の横幅と太さを設定できます。
.navbar-toggle .icon-bar + .icon-barは線と線の間の余白の設定です。

.navbar-toggle .icon-bar {
width:●●px;
height:●px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: ●px;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA