Bootstrapナビのカスタマイズ 畳んだときアイコンを非表示にする方法とテキスト寄せ変更

nav-icons0
ミミウサ
ミミウサ

Bootstrapのナビゲーションをカスタマイズしました。
次の2点のエラーが発生してしまいました。

  • ナビゲーション内にアイコンを挿入しました。
    ナビゲーションを畳んだときにアイコンだけ表示されたままになってしまいます。
    ナビを畳んだときはアイコンは消えてもらいたいですが、どうしたらいいですか?
  • ナビゲーションを畳んだらテキストが右に寄ってしまいました。テキストの寄せ方を変更したいです。

どうしたらいいですか?

このように、Bootstrap 4のナビゲーションの表示がズレるという件で固まっていました。

相当な時間を要しながらも解決しましたのでご報告です。

Bootstrapナビゲーションカスタマイズによるエラーの内容

Bootstrapのナビゲーションをカスタマイズによるエラーが発生しましたが、このとき行った作業は次のとおりです。

Bootstrapナビゲーションのカスタマイズ目的

レスポンシブといえばBootstrapになってしまうのですが、ナビゲーション周りはどうも「Bootstrapくさく」なってしまいますね。

nav-icons1

結構多くのサイトでこのBootstrapデフォルト形式のナビ。

Bootstrap臭くないナビゲーションにしたくSVGのアイコンをナビゲーション内に挿入するというカスタマイズをしました。

このとき発生したエラー2つが次のとおりです。

Bootstrapナビゲーションのエラーの内容

ナビゲーションに挿入したSVGアイコンは、本来、ナビを閉じたときは隠れて欲しいわけです。

nav-icons-before

 

残念ながら、このようにBootstrapのデフォルト状態でアイコンだけを挿入すると次のような不都合が生じていました。

nav-icons0

  • ナビゲーションを畳んだときにもアイコンが表示されてしまう畳んだときには非表示になってもらいたい。畳んだときは検索窓も非表示にしたい。
  • 畳んだときの各ナビゲーション項目が右に寄ってしまう。開いているときは「メインロゴは左、その他の項目は右寄り」、畳んだときは「各項目はセンタリング」になってもらいたい。

ナビゲーション畳んだときにアイコン非表示

 

というように「class=”collapse navbar-collapse”」を非表示にしたい「<svg></svg>」内に追加すれば、テキストの場合と同じように非表示にできるのですね。

「collapseである」「collapseでない」という概念がピンと来ていなかったので、やっとスッキリ理解しました。

畳んだときと開いたときで寄せ方変更

ナビゲーション開いたときの「一部の項目だけを右寄せ」しつつ、ナビゲーション畳んだときは「テキストを中央に寄せたい」ができずに苦しみましたが、結果として次のように対応すれば良いということをようやく探し当て、理解できました。

 

リストの<ul>部だけ取り出しますと・・

<ul class="nav navbar-nav ml-auto">

“ml-auto”で要素をすべて右寄せに。

 

<li class="nav-item collapse navbar-collapse navbar-wrap" id="navbarNav">
 <form class="form-inline">
     <input class="form-control" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
  </form>
</li>

 

畳んだとき(collapseじゃないとき)は中央にセンタリングしたいので、CSSに指定。

.icon-style {
	text-align: center;
}

 

“ml-auto”は<ul>に対してかかっているので、検索窓のフォーム<form></form>も<li></li>の中に入っていないといけないのですね。

盲点だったのは、

当初は次のような構造で<ul>のリストと<form>バラバラに右寄せをかけていました。

理屈上は上手く行きそうに見えるのですが右寄せにならず、検証に時間を要しました。

失敗のソース

<ul class="nav navbar-nav ml-auto">
 <li>Homeアイコン+テキスト</li>
 <li>Productsアイコン+テキスト</li>
 <li>Servicesアイコン+テキスト</li>
</ul>
<div class="nav-item collapse navbar-collapse navbar-wrap" id="navbarNav">
 <form class="form-inline my-2 my-lg-0 ml-auto">
     <input><button>Search</button>
  </form>
<div>

 

<ul>と<form>の両方に”ml-auto”を適用していたのですが、これだとフォームだけが右寄せになりました。

が、フォームの左に原因不明の空きが出来てしまい、3つのメニュー項目は右に寄れずに左寄せのままになってしまいました。

逆に検索フォームだけを右に寄せたい場合は、

  • <ul>には”ml-auto”しない
  • フォームは<ul>の外に置く
  • フォームだけに対して”ml-auto”を適応する

という対応でよさそうです。

Bootstrapナビゲーションエラー解決後

メニューを畳むとアイコンだけ無事消えるようになりました。

nav-icons2

メニュー開いたとき

nav-icons3

メニュー畳んだとき

おわりに

エラー解決はやはり勉強になりました。
そして、ご飯はパソコン机の上で食べるくらい楽しかった。

Web関連は、引き続きSVG、JS、WordPressを中心に勉強を進めようかなと思案中です。

以上、Bootstrap 4の場合のご報告でした!

PR プログラミング&Webデザイン奮闘記

なんだかんだでプログラミングまたはWebデザイン関係のスクールは3校ほど受講しました。
その質はばらつきが激しいと痛感。

3校の様子をレビューしますね。

通学型:料金は高いですが、対面なので先生は気合い入れて教えてくれるし、なにより同士となる生徒とのコミュニケーションは通学型でしか手に入らないと思いました。
仕事で悩みがあったのかいきなり泣き出す生徒さんに出会ったこともあり、そんな人間臭い出会いも良い思い出です。

オンライン型:オンライン型のスクールは私はこちら↓の侍エンジニア塾さんにお世話になりました。
私は当時、長期では通えなかったので侍エンジニア塾さんは1ヶ月コースがある点が良かったです。

私には都合が良いスクールでしたが契約する前に必ず体験を勧めます
詳しくは、以下の侍エンジニア塾さんの公式ページをご確認くださいね。

侍エンジニア塾での体験談は以下の記事でまとめています。
ご興味がある方は参考にしていただけると嬉しいです。

タイトルとURLをコピーしました