Menu button on mobile not working on my portfolio page


#1

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?


#2

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
https://code.jquery.com/jquery-1.11.0.min.js


#3

Menu doesn’t work because you lost Bootstrap JS library file.
Add this https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js


#4

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

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js

and the following external CSS file

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

All three of the above are default CDNs in Codepen


#5

The id you call: “navbarCollapse” is not right. You should use class : “collapse navbar-collapse”. You can follow your example source link: https://www.tutorialspoint.com/bootstrap/bootstrap_navbar.htm


#7

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"


#8

You are right. I check his code.


#9

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!