Bootstrap Navbar Is Displaying Vertically Instead Of Horizontally

I'm working on a project using CodePen and I'm using bootstrap to make a navbar. But for some reason it's displaying vertically instead of horizontally. Even when I copy and paste

Solution 1:

First like in the comments you are using bootstrap 3 markup and you are linking to both bootstrap 3 and 4 remove the bootstrap 4 css. Then you need to have the div with the class of collapse navbar-collapse so just add this to the div that has the id of nav just like the following:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">

    <div class="navbar-header">
      <a class="navbar-brand" href="#about">
        <span style="font-family: 'Source Code Pro', Monospace; color:green"><i class="fa fa-code"></i>Ryan</span></a>
    </div>
    <div class="collapse navbar-collapse"  id="nav">
    <ul class="nav navbar-nav">
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    </div>
  </div>
</nav> 

You may want to add the collapse button to the navbar header as well otherwise your links wont show up at mobile widths so it would look like:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" 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>
      <a class="navbar-brand" href="#about">
        <span style="font-family: 'Source Code Pro', Monospace; color:green"><i class="fa fa-code"></i>Ryan</span>
      </a>
    </div>
    <div class="collapse navbar-collapse"  id="nav">
    <ul class="nav navbar-nav">
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    </div>
  </div>
</nav> 

Solution 2:

As someone said - remove bootstrap 4 from loaded CSS files and it will work