Trouble with my navbar list and hamburger menu

1

Hey Coders,

I have spent a few days attempting to style my header to no avail. I basically want my un-ordered list to display horizontally across the header and collapse into a hamburger icon for smaller screens. My hamburger menu is just an all beef patty and I can’t figure out how to display the list horizontally. Here is a link and my header source code. I have bootstrap linked. If anyone has any help or ideas I would appreciate it greatly.

Thank you,
Stephen Johns

<div class="container">
  
  

  <a href="#" class="navbar-brand" id="pageTitle">Atlanta United<br>Unite and Conquer!!</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 class="active"><a href="#">Home</a>
      </li>
      <li><a href="#">Roster</a>
      </li>
      <li><a href="#">Player Stats</a>
      </li>
      <li><a href="#">Fan Zone</a>
      </li>
      <li><a href="#">Memorable Goals</a>
      </li>
      <li><a href="#">Contact Me</a>
      </li>
    </ul>
  </div>

</div>
2

would’ve been great if you made a fiddle/pen.
welp here’s your burger menu sir, thank you and come again!
ref: http://getbootstrap.com/docs/4.0/components/navbar/

3

Thank you,

Your burger menu looks delicious. I believe the bootstrap link is exactly what I need to build my collapsing menu that is three horizontal lines stacked on top of each other. As far as the fiddle/pen goes, I am using a chromebook to code so I am using Caret as codepen isn’t compatible and I haven’t tried JSfiddle yet but I may check it out. If there is a better way for me to display my code for other users I would love to hear any ideas that would help me contribute to this community in the future.

Cheers,
Stephen

4

It also turns out that I had bootstrap 4 linked when I needed 3.

5

hi EvilSteve1717,
your bootstrap.js version doesn’t match the boostrap.css ver,
functions won’t work if they’re not compatible

pick one v
bootstrap 3.3
bootstrap 4