Please help me with my nav-bar

Please help me with my nav-bar
0

#1

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!


#2

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


#3

you re not making your navbar collapsible https://getbootstrap.com/components/#navbar


#4

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.


#5

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?


#6

Found the problem!
jQuery needs to be at the top of the list before Bootstrap in your JavaScript.


#7

My savior! Thank you so much!


#8

Do you understand why that issue was happening?


#9

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?


#10

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.


#11

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


#12

Why do you have 2 links to bootstrap.min.css?


#13

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">