Beginner Having Problem with Collapsing Navbar in Codepen

1

Hey, I’m just starting to get into Bootstrap and have been running into problems making a navbar that collapses into a button. I’ve been trying to figure it out for the last few hours but have had little success. The navbar seems to be two times too tall when in full width but then returns to the correct heigh when compressed. Also, the button doesn’t work at all.

I followed the following Youtube instructions when I wrote the code: https://www.youtube.com/watch?v=qpWlaOeGZ_4

And here is the link to my Codepen: https://codepen.io/AlexKovacs24/pen/YNpdpB?editors=1000

Thanks

2 Likes
2

Hi @alexkovacs24

The reason the navbar isn’t working is because you need to have bootstraps js library on the page. If you go to the codepen settings and add another resource under jquery, then paste this into it: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js, that should get it to work.

Also, the reason the links aren’t on the same line as the brand is because you have the collapsible div inside the navbar-header, you want to move it outside so it’s a child of the container, like so:

// Before
<div class="container>
  <div class="navbar-header">
    <a href="#" class="navbar-brand">Shays Pub and Wine Bar</a>

    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Beer</a></li>
        <li><a href="#">Wine</a></li>
        <li><a href="#">Food</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

// After
<div class="container>
  <div class="navbar-header">
    <a href="#" class="navbar-brand">Shays Pub and Wine Bar</a>

    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="collapse navbar-collapse navHeaderCollapse">
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Beer</a></li>
      <li><a href="#">Wine</a></li>
      <li><a href="#">Food</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>
4 Likes
3

Hey Joe,

Thanks for the feedback! I was able to get the nav bar to the correct height but I’m still unable to get the button to work. I added the link you sent under Jquery in the JavaScript settings but still had no luck. Any ideas?

1 Like
5

Always put jQuery first, and bootstrap js second :slight_smile: I had this same issue one month ago.

12 Likes
6

Joesmith is correct, you should use Bootstrap 3.3.7, buttons and navbars don’t work in 4.0.1. Please watch the following video for more info:

3 Likes
7

Just in case someone is stumbling over this and still having issues. There are some alleged fixes for this problem, like adding Bootstrap in settings. Just in case it didn’t work, it might be a problem of you still having Bootstrap enabled under “CSS”. Clear that one and use the solution mentioned above and you should be good to go :slight_smile:

1 Like
8

I was having the same issue, and this fixed it. Thanks!

9

Thanks a Lot
Spent 4 hours trying to figure out what was wrong in my code. :smiley:

10

woooooooooof great comments
i fix it now thanks to @felipemoura