While Vedran Jaic's response was helpful, I found that it required a bit more tweaking to achieve the desired smooth animation effect. To address this, I added an empty absolute position div ('#navbar-expander') with a height of 100vh inside the navigation bar. This helped to set the height of the navbar during transitions, preventing any stuttering in the animation caused by the relative positioning of elements within the nav. Though there may be alternative methods to set the height, this approach worked for me and I opted to stick with it...
<div id='navbar' class="collapse navbar-collapse">
<div class='navbar-expander'></div>
<ul class="nav navbar-nav navbar-left">
{{# each navLinks}}
<li {{#ifeq ../section key}}class="active"{{else}}{{/ifeq}}>
<a href="{{ href }}">{{ label }}</a>
</li>
{{/each}}
</ul>
</div>
Subsequently, I adjusted the classes, incorporating Bootstrap transitions that would be added or removed as necessary (the following snippet exhibits the fullscreen nav exclusively on extra small devices, but the media query can be eliminated to apply it across all devices):
.navbar-expander{
position: absolute;
top:0px;
left:0px;
width: 100%;
height:100vh;
display:none;
}
@media screen and (max-width: $screen-sm-min) {
.navbar-collapse,
.navbar-collapse.collapse,
.navbar-collapse.in,
.navbar-collapse.collapsing{
max-height: 100vh;
}
.navbar-collapse.in{
height: 100vh;
}
.navbar-expander{
display:block;
}
}
Regarding the icon alteration, I found the snippets in the following link to be particularly effective, so I wanted to share them: