My first time using Bootstrap 4, and I'm encountering a challenge that was much simpler in Bs3: I want the link items in my navbar to collapse into a hamburger menu when the screen size is xs.
While the documentation and another answer touch on this, I seem to be following the correct classes. However, when the screen is sized XS, the link items don't collapse - instead, they just disappear.
Here's the JSFiddle with CSS for the full view. Here's what I'm doing with my navbar:
<nav class="navbar navbar-full navbar-light" style="background-color: #E4491C; padding: 0px;">
<p id="toptext">Test</p>
</nav>
<nav class="navbar navbar-full navbar-light" style="background-color: #002b52">
<div class="navbar-header">
<a class="navbar-brand" href="#">TopDog</a>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="pull-sm-right navbar-brand2" href="#">Contact</a></li>
<li class="nav-item"><a class="pull-sm-right navbar-brand2" href="#">About</a></li>
</ul>
</div>
</div>
</nav>
I'm using the toggleable class, specifying these as link items; the only difference I notice is that I'm also using a pull-sm-right class to bring the links to the right side of the nav. Removing them didn't solve the issue.
Question: Why is Bootstrap not displaying these links as a collapsible menu when I resize the page?