My hamburger icon won’t drop down to show my links. Also, is there a way to make my links show the section title when scrolling? The nav-bar covers it, when I want it to treat the bottom of the nav-bar as the top of the page.
Thank you for your help!
Hey, for the dropdown menu there is an exemple in Boostrap 3.3.2 documentation. You’ll probably find your answer to this problem there: http://getbootstrap.com/components/#nav-dropdowns
Even copy and pasting the code from the example, the drop down won’t work. I’ve tried different codes with Bootstrap 3 & 4 and neither worked. I’m just left here scratching my head.
It was, I undid and remade it back up, but am obviously missing something. Even a fresh copy paste form an example isn’t working. Am I missing some setting or something?
Found the problem!
jQuery needs to be at the top of the list before Bootstrap in your JavaScript.
My savior! Thank you so much!
Do you understand why that issue was happening?
Not particularly. I kind of pieced that part together as I only did JQuery on FCC, which is different than the set up for Codepen. If I had to make an educated guess, I would assume the order is important here. In order for bootstrap to use the jQuery, the jQuery needs to be added first. Perhaps jQuery unlocks some bootstrap functions?
You are correct, Bootstrap is dependent on jQuery to make actions like the drop down.
In a typical HTML page it would look something like this.
<html>
<head>
<link href="bootstrap.min.css">
<link href="bootstrap.min.css">
<link href="YOUR STYLES">
</head>
<body>
<script arc="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>YOUR SCRIPTS</script>
</body>
</html>
Switch them around would cause the same issue you were having.
In a environment like codepen.io where they imply that your working within a body tag it’s kinda hard to believe they don’t structure your scripts properly for you.
Why do you have 2 links to bootstrap.min.css?
I was referring to these two options on the “Getting started” bootstrap website but it depends on the framework or pakage manager you are using.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">