BootstrapのNavbarメニューがスマホでボタン化されちゃうのを防ぐ方法！

どうもpei(@pei_babo)です。

ご存知の通りBootstrapは「レスポンシブ・デザイン」を簡単に導入できるCSSフレームワークですね。
画面サイズの違うPC・タブレット・スマートフォンなど、どのデバイスでも見やすく・且つ操作しやすいイケてるWebページを簡単に実装出来てしまうという画期的なものです。

各コンポーネントがしっかりレスポンシブ化されているので、本家Bootstrapサイトの使い方を真似すれば特に気にせず勝手にレスポンシブ化されてて嬉しいのですが、「ちょっとだけ動き変えたいな。」という時もあると思います。

今回はその「ちょっとだけ動き変えたいな。」の部分から、Navbarのメニューがスマホなど画面サイズが小さい時に勝手にボタン化されて見やすくされてしまうのを防ぐ方法を紹介します。

Navbarの動きをこう変えたい！

前述のとおり、BootstrapのNavbarのメニューは画面サイズが小さくなると全て表示しきれない関係上、下記のようにボタン化されますね。

PCでの表示

スマホでの表示

とても嬉しい機能ですが、例えばリンクが一つしかない場合などはボタン化されると逆にユーザビリティが低下しそうですよね。
ですので、この機能をスマホでの表示でも下記のようにボタン化せずにそのままのリンクになるようにしたいのです。

スマホでもボタン化されない！

CSSコードでちょっと上書きするだけで実装可能ですので、四の五の言わずにコードを書いていきます。

<style>

.navbar-toggle {

display: none;

}

.collapse {

display: block;

border-color:transparent;

}

/* navbar-leftの場合はここをleftに変える */

.navbar-right {

float: right;

}

.navbar-header {

float: left;

}

.navbar-nav {

margin:0 -15px 0 0;

}

.navbar-nav>li>a {

padding-top: 15px;

padding-bottom: 15px;

}

</style>

このコードをBootstrapのCSSより後ろで読みこめば大丈夫だと思います。
いちおうデフォルトの動きと今回の対応をしたデモページを用意しましたので、ブラウザの画面サイズを変更しながら確認してみてくださいね。

ノンデザイナーな私やみなさんはBootstrapの素晴らしい恩恵を受けながら、ちょっとずつ自分なりにカスタマイズしていくとどんどんWeb制作が楽しくなりますよね。
今後もちょっとしたBootstrapカスタマイズtipsも投稿していければと思っていますのでよろしくです。

もし良かったらフォローとか購読して頂けると嬉しいです！╭( ･ㅂ･)و ̑̑ ｸﾞｯ !