Bootstrap Navigation Collapse issue (Portfolio Website)

Project Feedback
#1

My portfolio site has a navigation bar, and the menu options ‘About’, ‘My Projects’, and ‘Contact Me’ hide behind an expandable menu when the webpage width is less than the md breakpoint. I’ve added data-toggle=“collapse” to the menu options so that when the user clicks any of the menu options, the menu collapses.

The problem I’m encountering is that the menu options mentioned above go through the collapse animation even when the width of the page is above the md breakpoint.

I’ve posted pretty much the same question on Stack Overflow, so apologies for the robot-like question posting behavior: https://stackoverflow.com/questions/44146605/preventing-bootstrap-collapse-animation-above-md-breakpoint

Link to website: http://benws-projectportfolio.herokuapp.com/

HTML:

<nav class="navbar navbar-inverse fixed-top navbar-toggleable-md navbar-light bg-faded" style="background-color:#3A4A4D;">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Ben Shippey</a>
  <div class="collapse navbar-collapse mr-auto" id="navbarSupportedContent" style="background-color:#3A4A4D;">
	 <ul class="navbar-nav ">
	  <li class="nav-item">
		<a id="aboutButton" class="nav-link active" href="#navbarSupportedContent" data-toggle="collapse">About</a>
	  </li>
	  <li class="nav-item">
		<a id="projectButton" class="nav-link" href="#navbarSupportedContent" data-toggle="collapse">My Projects</a>
	  </li>
	  <li class="nav-item">
		<a id="contactButton" class="nav-link" href="#navbarSupportedContent" data-toggle="collapse">Contact Me</a>
	  </li>
	</ul>
  </div>
</nav>
#2

Hi @BenWS
My first question is what version of Bootstrap are you using? I’ve seen others having problems because they are using the new version 4 of bootstrap and there are changes as to how to set up the nav bar and some class names. If you are using version 4 here is a link to version 4 changes.

I hope this helps :slight_smile:

#3