Navbar Collapse button wont expand

Question

So I just started working on my portfolio page, (2nd project so be gentle) and everything was going smoothly until I tried using the collapse button to show the links to the other parts of my webpage.

Here is the code in question:

<body>
<div class="row">
<div class="col-md-12">
  <div class="container">
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <a href="#" class="navbar-brand Logo" id="Logo">
      StruckCroissant
    </a>
      <button class="navbar-toggle" type="button" 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" id="Nav-List">
          <li><a href="#">About Me</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Contact Me</a></li>
        </ul>
      </div>
    </nav>
  </div>
</div>

And then here is the custom css i am using:

 .Logo{ font-size:20px; color:white; font-family:Monospace; -webkit-transition:all ease 0.2s; -moz-transition:all ease 0.2s; -o-transition:all ease 0.2s; transition:all ease 0.2s; } #Logo:hover{ font-size:20px; color:green; font-family:Monospace; background-color:white; border-color:white } #Nav-List{ padding-right:30px; }

Mainly my problem is getting the button to expand and actually show the items in the list, but currently all it does it just respond to click by getting more bright.

Any help is appreciated! Thank you in advance!

Answer 1

I had a similar problem. Looked over the html several times and was sure it was correct. Then I started playing around with the order of jquery and bootstrap javascript.

Originally I had bootstrap.min.js loading BEFORE jquery.min.js. In this state, the menu would not expand when clicking on the menu icon.

Then I changed the order so that bootstrap.min.js came after jquery.min.js, and this solved the problem. I don't know enough about javascript to explain why this caused the problem (or fixed it), but that is what worked for me.

Additional info:

Both scripts are located at the bottom of the page, just before the tag. Both scripts are hosted on CDNs, not locally hosted.

If you're pretty sure your code is correct, give this a try.

If this not solve your problem, follow these steps:

1 - Post your Plunker or Fiddle here
2 - Try using this snippet for a navbar collapse sample instead of yours, with your own style

 <div class="collapse navbar-collapse">
              <ul class="nav navbar-nav navbar-right">
                <button id="loginbutton" type="button" class="btn btn-primary narbar-btn"><i class="glyphicon glyphicon-log-in"></i>Login</button>
                <button type="button" class="btn btn-success navbar-btn"><i class="glyphicon glyphicon-link"></i><a href="./register.jsp">Create account</a></button>
              </ul>
 </div>

Navbar Collapse button wont expand

Question

1 answers

solution1
0 2016-08-26 20:00:12

Navbar Collapse button wont expand

Question

1 answers

solution1 0 2016-08-26 20:00:12

solution1
0 2016-08-26 20:00:12