Need help with Bootstrap navigation bar not listing items horizontally in Codepen

1

I have been stuck for a long while trying to get my Portfolio page going and I am pretty frustrated that I keep getting stuck on the same thing in Codepen. It makes the navigation bar vertical instead of horizontal.

I’m trying to make a horizontal navigation bar and even copied some HTML from W3Schools to see what would happen. When I save the HTML in CodePen, this is what I get.

But when I access the text at W3 Schools or copy it into a new notepad file and save as HTML and launch it, it has the Navigation Bar as horizontal like I want it.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h

Please someone help. I feel like this is either a CodePen setting or issue at this point.

2

Could you take a screenshot of what you see because on my screen the navigation bar is horizontal in your CodePen.
Here’s what i’m seeing:

Capture d’écran 2017-07-22 à 01.06.23.jpg3840×2400 712 KB

3

This is Bootstrap, through and through. You’ve set everything up correctly except for the collapsing part of your nav. If you added the <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> and closing tag around your ul, you’d find that your links would disappear.

This is because Bootstrap is trying to make the navigation “mobile-friendly”. If you open up the display window (by dragging the middle bar) or change the view to full page, you’ll see a horizontal nav.

My advice is to add the collapse features of the bootstrap nav.

4

5

Soooo, think we figured this out here. This had to do everythign with the responsive design and the fact that I had to make my “view” different. I didn’t realize that because of my monitor size/shape (small square), I would have to make the Viewing Area basically the entire monitor.

*FacePalm

Thanks for the help guys.