Menu button on mobile not working on my portfolio page

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:

My code:

  <link href='' 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>
    <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>
    <div class="col-md-3"></div>
  <div class="border"></div>

my codepen page:

What am I doing wrong?

That version of jQuery which can be found on Codepen doesn’t work with Bootstrap 3 for some reason.
Secondly, you’re missing the Boostrap 3 js file.


Follow this setup, and your page will work as expected.
Here is the link to the jQuery you need

Menu doesn’t work because you lost Bootstrap JS library file.
Add this

You can use the following two external JS files in Codepen:

and the following external CSS file

All three of the above are default CDNs in Codepen

1 Like

The id you call: “navbarCollapse” is not right. You should use class : “collapse navbar-collapse”. You can follow your example source link:

The OP’s current code works fine as long as the proper external JS files and CSS files are linked. I just tested it myself. The id can be called “anything” as long as it is properly referenced in the button element with data-target="#anything"

You are right. I check his code.

Ok, thank you all.

I did not realize there was a javascript component to bootstrap that I needed to load since in my practice using bootstrap I only ever needed the css link. It’s working now!