Please help me with my nav-bar

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!

1 Like

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:

you re not making your navbar collapsible

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.

1 Like

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.

<link href="bootstrap.min.css">
<link href="bootstrap.min.css">
<link href="YOUR STYLES">
<script arc="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>YOUR SCRIPTS</script>

Switch them around would cause the same issue you were having.

In a environment like 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.

1 Like

Thank you @liberaltech I really appreciate your taking the time to help explain that to me.

1 Like

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="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">