Navbar not displaying content [SOLVED]

1

Hi all, i’m trying create a navbar that collpases the content with bootstrap but when i click the toggler button it doesn’t do anything here is my code, please help what am i doing wrong:

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
    <a href="#" class="navbar-brand">qlip</a>
    <button type="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="#">ABOUT</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div>
  </div>
</div>

i’m adding this stylesheet in codepen CSS processor option:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

thanks in advance.

2

Did you add jQuery and bootstrap.js in your code?

3

I added this in the CSS preproccesor

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

and this two in the Javascript preprocessor

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
4

You should use the same version (3.3.7) for bootstrap.js. Also, jquery should be loaded first.

1 Like
5

Awesome! That was the problem, thank you very much!