So I’m pretty pleased with the progress of my personal portfolio site, even if it is taking me forever to do. Of course, I want the fixed navbar to collapse and be toggle-able on smaller screens. At the moment, my navbar is collapsing and the toggle button is appearing. However, nothing happens when I click the hamburger button. I’m sure that my menu items are supposed to appear. I can’t find what’s wrong. I did link the bootstrap css and js files as well as jQuery in the relevant sections of my codepen.
> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> > <div class="container-fluid"> > <div class="navbar-header"> > <span class="navbar-brand pull-left hidden-sm hidden-xs"><img src="http://res.cloudinary.com/gratefulheartdesign/image/upload/v1466500362/grateful-heart-logo-small-span_sldwxo.svg" width="75%"/></span> > <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ghdNavCollapse" aria-expanded="false"> > <span class="sr-only">Toggle navigation</span> > <span class="icon-bar"></span> > <span class="icon-bar"></span> > <span class="icon-bar"></span> > </button> > </div> > <div class="collapse navbar-collapse navbar-toggleable-xs" id="ghdNavCollapse"> > <ul class="nav-list nav navbar-nav"> > <li class="nav-item"> > <a class="nav-link" href="#about">About</a> > </li> > <li class="nav-item"> > <a class="nav-link" href="#portfolio">Portfolio</a> > </li> > <li class="nav-item"> > <a class="nav-link" href="#contact">Contact</a> > </li> > </ul> > </div> > </nav>
Any and all help will be greatly appreciated!