Issue
I'm unable to open the hamburger menu while using bootstrap. Would somebody please tell me what the issue is with the code?
I've pulled the code directly from the bootstrap website. I've looked at others' questions regarding this problem, but the suggested solutions haven't helped.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;">
<a class="navbar-brand" href="index.html">
<img src="logo.png" width="200" height="200" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" 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">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio </a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact </a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<a href="#"></a>
<a href="#" class="fa fa-instagram"></a>
</div>
</nav>
Please explain this for me very simply, as I'm new to coding. I want to be able to open the hamburger menu on a mobile device.
Solution
data-target
and theid
were not the same.- You need the
jquery
andbootstrap.js
for the dropdown to work.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;">
<a class="navbar-brand" href="index.html">
<img src="logo.png" width="50" height="50" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio </a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact </a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<a href="#"></a>
<a href="#" class="fa fa-instagram"></a>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
Answered By - Rick Sibley
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.