# Navbar weirdness in Codepen

**URL:** <https://forum.freecodecamp.org/t/navbar-weirdness-in-codepen/94734>\
**Category:** General\
**Created:** [March 8, 2017, 1:01pm UTC](https://forum.freecodecamp.org/t/navbar-weirdness-in-codepen/94734 "2017-03-08T13:01:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Olfactorybasic](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/olfactorybasic/32/159627_2.png) [@Olfactorybasic](https://forum.freecodecamp.org/u/Olfactorybasic)\
**Post date:** [March 8, 2017, 1:01pm UTC](https://forum.freecodecamp.org/t/navbar-weirdness-in-codepen/94734/1 "2017-03-08T13:01:45Z")

</div>

I had a very weird result as to how the navbar layout played out in codepen compared to simply my broswer off of a html file.

![](https://global.discourse-cdn.com/freecodecamp/original/3X/8/d/8d6a195d4a20ba4b4bb5d21335d79daad7c5485c.jpg)

The problem in codepen persisted after I boiled down the steps to reproduce to these steps:

Start a new pen  
Include boostrap.css, jquery.js and boostrap.js as per the instructions in this video ([https://www.youtube.com/watch?v=hiCK6-8XfiA](https://www.youtube.com/watch?v=hiCK6-8XfiA))  
paste navbar code from boostrap

Im doing this is Chrome and cleared browser cache  
Firefox and Safari gave me same results

Is it codepen or is it me?

---

<div class="post-metadata">

**Author:** ![BenGitter](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bengitter/32/12192_2.png) [@BenGitter](https://forum.freecodecamp.org/u/BenGitter)\
**Post date:** [March 8, 2017, 1:18pm UTC](https://forum.freecodecamp.org/t/navbar-weirdness-in-codepen/94734/2 "2017-03-08T13:18:40Z")

</div>

Maybe it is the version:

> **[Codepen changed the default Bootstrap version](https://forum.freecodecamp.org/t/codepen-changed-the-default-bootstrap-version/85235)**
>
> For some reason Codepen has decided to change the default version of Bootstrap from version 3 to 4.0.0-alpha.6. Bootstrap 4 has some breaking changes, causing problems if you expect everything to work as normal. You can of course manually add the...

---

<div class="post-metadata">

**Author:** ![Olfactorybasic](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/olfactorybasic/32/159627_2.png) [@Olfactorybasic](https://forum.freecodecamp.org/u/Olfactorybasic)\
**Post date:** [March 8, 2017, 2:30pm UTC](https://forum.freecodecamp.org/t/navbar-weirdness-in-codepen/94734/3 "2017-03-08T14:30:09Z")

</div>

Did the trick, awesome!

Thank you BenGitter!

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 9:42am UTC](https://forum.freecodecamp.org/t/navbar-weirdness-in-codepen/94734/4 "2021-01-17T09:42:35Z")

</div>

Closed on January 17, 2021, 9:42am UTC