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:

<navclass="navbar navbar-inverse"><divclass="container-fluid"><divclass="navbar-header"><aclass="navbar-brand"href="#about"><spanstyle="font-family: 'Source Code Pro', Monospace; color:green"><iclass="fa fa-code"></i>Ryan</span></a></div><divclass="collapse navbar-collapse"id="nav"><ulclass="nav navbar-nav"><li><ahref="#about">About</a></li><li><ahref="#portfolio">Portfolio</a></li><li><ahref="#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:

<navclass="navbar navbar-inverse"><divclass="container-fluid"><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#nav"aria-expanded="false"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#about"><spanstyle="font-family: 'Source Code Pro', Monospace; color:green"><iclass="fa fa-code"></i>Ryan</span></a></div><divclass="collapse navbar-collapse"id="nav"><ulclass="nav navbar-nav"><li><ahref="#about">About</a></li><li><ahref="#portfolio">Portfolio</a></li><li><ahref="#contact">Contact</a></li></ul></div></div></nav>

Solution 2:

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