質問: Bootstrap3のメニューバー(CSS/JavaScript)についての質問です。 現在、スマホで見た時、メニューバー左にメニューアイコン、中央にプロジェクトネームが表示、メニューアイコンをクリックすると、.navbar-navと.navbar-rightのリンクが上下に並んで表示されます。 これを、メニューアイコンをクリックすると、プロジェクトネームを非表示、.navbar-navのリンクはそのままで、.navbar-rightのリンクをメニューバー右に表示したいのです。 どのようにCSS/JavaScriptを記載すれば良いのでしょうか? 数日間、試行錯誤しましたが、解決できません。 完全なコードを回答していただいた方には500ポイントを差し上げます。よろしくお願いいたします。 HTML,CSSは▼こちらです。
回答: .navbar-right をメニューバーの右に表示するのは、CSS だけでいけます。 質問の で追加した CSS に以下を追記してください。 ``` @media (max-width: 768px) { ... .navbar-right { position: absolute; /* 位置は、お好みで調整してください */ top: 0; right: 1em; } } ``` Project name (.navbar-brand) の非表示は javascript で制御しないと駄目だと思います。 ``` $('.navbar-collapse') .on('shown.bs.collapse', function() { $('.navbar-brand').hide(); }) .on('hidden.bs.collapse', function() { $('.navbar-brand').show(); }); ``` 質問のサンプルを Fork して、これらのコードを追記したのがこちらです。 追記です。 > Project name(.navbar-brand)の非表示と.navbar-right の右上表示が、メニュー(.collapse)表示後に行われるため、動きが緩慢でぎごちなく見えてしまいます。 > > javascript を、少し変更してみました。 ``` $('.navbar-collapse') .on('show.bs.collapse', function() { $('.navbar-brand').hide(); $('.navbar-right').hide(); }) .on('shown.bs.collapse', function() { $('.navbar-right').show(); }) .on('hide.bs.collapse', function() { $('.navbar-brand').show(); $('.navbar-right').hide(); }); ``` .nav-right の位置決めがメニュー表示後に確定するっぽいので、多少マシになった程度でなのですが。