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


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.

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


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:


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.



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.


Thanks for the help guys.