I’m working on the start of my portfolio. I have the three links, About, Portfolio, Contact. Everything shows up nicely on desktop and mobile, except that on mobile, clicking the menu button does nothing. I’m expecting a drop down menu of the the three links like is shown here:
https://www.tutorialspoint.com/bootstrap/bootstrap_navbar.htm
My code:
<head>
<link href='https://fonts.googleapis.com/css?family=Gruppo' rel='stylesheet'/>
<nav class="navbar navbar-default navbar-fixed-top" style="border:none;">
<div class="border"></div>
<div class="container-fluid row banner">
<div class="col-md-3"></div>
<div class="navbar-header col-md-2">
<a class="navbar-brand" href="#"><font class="title">Portfolio</font></a>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbarCollapse" class="col-md-4 banner-font collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><font class="banner-font">About</font></a></li>
<li><a href="#"><font class="banner-font">Portfolio</font></a></li>
<li><a href="#"><font class="banner-font">Contact</font></a></li>
</ul>
</div>
<div class="col-md-3"></div>
</div>
<div class="border"></div>
</nav>
</head>
my codepen page:
What am I doing wrong?