navbar の修正

課題のPortfolioサイトですが、画面を小さくした際にボタンが消えてしまう状態だったのに気付きました。

その点も含めて、navbarの色を変えたりカスタマイズする場合についても調べて少し触ってみました。

参考:

http://mizukazu.minibird.jp/bootstrap-navbar-color/

http://shared-blog.kddi-web.com/webinfo/12

上のサイトを見て navbar部分を少し修正、色についても変更してみました。

具体的に自分で細かく修正する場合には、ChromeでPF12を押し、コンソールを表示した後に Elementsタブに移動すれば表示されている要素が表示されるので、これを見ながらnavbarの要素の色等を調整できます。上の2つのリンクで実際に何をやっているか見比べながら実行することで細かい点も理解できると思います。

capture113

修正後は、画面を携帯のように細長くしてもきちんとメニューも含めて表示されるようになっています。

capture114

修正したのは header.html と main.cssの2つ

とりあえず2週目の課題はこんなんで良いかなと思うので提出してみます。

書き忘れ:

navbar のアイコンについては、 fortawesome を使いました。 meteorのパッケージがあったのでそれを追加。後はリンクの記事を元に

<i class=”fa fa-home”></i> Home

等としています。

meteor のパッケージはこちら。

https://atmospherejs.com/fortawesome/fontawesome

 

コメントを残す

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