Webサービス”TradingToolbox”のナビゲーションバーの不具合を修正

自作Webサービスとして展開中のTradingToolboxですが、ヘッダー部分にあるナビゲーションバーにバグがありました。画面幅が広い時は各ページへのテキストリンクがそのまま表示されるのですが、画面幅が狭い時はボタンを表示しそのボタンをクリックすることで各ページへのリンクを展開するのが正しい姿ですが、そもそもボタンが表示されていませんでした。スマートフォンなどの小さい画面だと各ページへのリンクが有無を言わせず表示されないことになってしまうので大変ご不便をおかけしてしまいました。誠に申し訳ありません。

原因はBootstrap4のnavbarコンポーネントの中で画面幅が小さい時に表示するボタン部分のコード(以下赤字部分)をごっそり書いていなかったからでした。そりゃー表示されない訳です。。

<nav class=”navbar navbar-expand-lg navbar-dark bg-dark fixed-top”>
<a class=”navbar-brand” href=”#”>
<img src=”{% static ‘img/favicon.jpg’ %}” width=”30″ height=”30″ alt=””>
</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNav” aria-controls=”navbarNav” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarNav”>
<ul class=”navbar-nav”>
(省略)
</ul>
</div>
</nav>