Collapsed Navbar only showing on small screen size bootstrap - html

Question

I am trying to implement a navbar that collapses when on small devices. This works properly.
However, on medium and large screens, the navbar does not show up at all. I want the navbar to appear like a normal navbar for medium and large screens and then collapse into the navbar button for small devices. I'm following the bootstrap template and have no idea why the navbar doesn't show up at all.
<div class = "container">
<nav class="navbar navbar-default" >
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="logo" src="logo.png" width="250px;">
</a>
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#collapse-navbar" aria-expanded="false" aria-controls="navbar">
☰
</button>
</div>
<div class="navbar-collapse collapse" id="collapse-navbar">
<ul class="nav navbar-nav">
<li class= "nav-item"><a class= "nav-link active" href="#">Home</a></li>
<li class= "nav-item"><a class= "nav-link" href="#">Build</a></li>
<li class= "nav-item"><a class= "nav-link" href="#">About</a></li>
</ul>
</div>
</nav>
</div>
Here's a code pen link: https://codepen.io/gkunthara/pen/VWdrYj

Answer 1

You are using bootstrap 3 markup and linking to bootstrap 4 css either link to bootstrap 3's css and javascript like so:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Or change your navbar markup to bootstrap 4's markup like so:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="logo" src="logo.png" width="250px;">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Build</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>

Answer 2

You need to display the .navbar-header button on medium and large screen. So change
#media (min-width: 768px)
{
.navbar-toggle {
display: none;
}
}
this to
#media (min-width: 768px)
{
.navbar-toggle {
display: none;
}
.navbar-header button {
display: block;
}
}
https://codepen.io/julysfx/pen/jwRYQB