ブラウザ画面のサイズを変更すると、期待どおりにナビゲーションバー要素がトグルボタンアイコンに置き換えられますが、このトグルボタンをクリックすると、折りたたまれたナビゲーションバーアイテムが表示されません。
<nav class="navbar sticky-top navbar-expand-md navbar-dark bg-dark" id="NSNavbar">
<div class="container d-flex flex-column flex-md-row justify-content-md-centre">
<!-- Brand -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="Images\NOSOLO_FT_Logo.png" alt="Logo" style="width:40px;">
</a>
</div>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav mr-auto" role="tablist">
<li class="nav-item">
<a class="nav-link d-none d-md-inline-block" href="#who-we-are">Who We Are<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link d-none d-md-inline-block" href="#meet-our-team">Meet Our Team</a>
</li>
<li class="nav-item">
<a class="nav-link d-none d-md-inline-block" href="#what-we-offer">What We Offer</a>
</li>
<li class="nav-item">
<a class="nav-link d-none d-md-inline-block" href="#who-we-work-with">Who We Work With</a>
</li>
<li class="nav-item">
<a class="nav-link d-none d-md-inline-block" href="#youtube">NoSolo on Youtube</a>
</li>
<li class="nav-item">
<a class="nav-link d-none d-md-inline-block" href="#clients">Our Clients</a>
</li>
<li class="nav-item">
<a class="nav-link d-none d-md-inline-block" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
（navbar-expand-mdこのクラスを追加することにより）中画面でトグルを設定し、（このクラスをnavbarにdisplay none追加することにより）中画面で行うように設定されているd-none d-md-inline-blockため、折りたたみメニューは表示されません。
そのためにd-none d-md-inline-blockは、nav-linkから削除する必要があります。
ソリューションスニペットは以下のとおりです
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<nav class="navbar sticky-top navbar-expand-md navbar-dark bg-dark" id="NSNavbar">
<div class="container d-flex flex-column flex-md-row justify-content-md-centre">
<!-- Brand -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="Images\NOSOLO_FT_Logo.png" alt="Logo" style="width:40px;">
</a>
</div>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#who-we-are">Who We Are<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#meet-our-team">Meet Our Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#what-we-offer">What We Offer</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#who-we-work-with">Who We Work With</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#youtube">NoSolo on Youtube</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#clients">Our Clients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加