Unfortunately, I can’t seem to get the navbar at the top to work. I’ve tried looking at examples from w3schools, and from other working examples. I’ve tried copying the entire code from the CodePen page to a basic Notepad editor, and it works just fine there. I’ve even tried copying working examples from other sites into CodePen and they simply don’t work the same. What am I missing here?
What exactly isn’t working with your nav bar? Aka, which behavior are you trying to accomplish but can’t? At first glance, it looks like it works, but I don’t know what you were trying to do, so let us know!
I actually got it working about half an hour ago. Turns out that the issue was with the version of Bootstrap that I was getting from the QuickAdd feature in CodePen. When I used that feature, it decided to give me the alpha variant of a newer, untested version that wasn’t working properly. A friend linked me to his page that had a more stable, slightly older version of the Bootstrap library, and that made everything work the way I expected.
At some point, it would be nice to know how the QuickAdd feature picks out which Bootstrap library to add into my page, but for now I’m just going to move forward with my portfolio. Thanks!
Thanks so much for posting this, I was losing my mind trying to figure out why my navbar wasn’t rendering correctly. As soon as I changed the bootstrap version from 4.0.0-alpha.6 back to 3.3.7, everything was fine. I really wish codepen linked to the stable release!
I stumbled on this as well. Note to newcomers
The default “Quick-add” settings in Codepen did not work for the navbar. If you are using Bootstrap classes in your HTML make sure to include the correct version of Bootstrap in the Codepen settings. I’m using Bootstrap 4 classes and thus added the CSS and JavaScript libraries for those as seen here:
Thanks for posting this question. I’m working on the portfolio assignment now and was trying to use the Bootstrap navbars from w3schools. It was driving me a little bonkers, haha.
