Attempting to scale a webpage the Bootstrap 4 way by using html font-size and rem everywhere else seems to be causing issues with the responsive navbar activation. The problem arises when the view is scaled down; the responsive navbar fails to hide the menu options and display the hamburger icon correctly.
The issue occurs when increasing the html font-size, preventing the responsive navbar from activating when the menu extends outside the viewport. For example, if you scale the view down with a 22px font, you'll notice the menu moving to the next line. However, removing that CSS and scaling back to the default 16px font, the menu functions properly.
Any suggestions on how to fix this problem, or is there a mistake in the way I'm handling the responsive navbar and font scaling?
HTML
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#">Responsive navbar</a>
<ul class="nav 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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
CSS
html {
font-size: 22px;
}
Additional information and documentation on my example and responsive navbar: Link to documentation
Image illustrating the bug: Bug image