I've been working on designing a layout that features a sidebar on the left side, a fixed top navigation bar on the right side, and my site content underneath. Here is what I have so far:
<div class="container-fluid">
<div class="row no-gutter">
<!-- left side -->
<div class="col-md-4 sidebar" style="background-color: red;">
<p>test</p>
</div><!-- end left side -->
<!-- right side -->
<div class="col-md-8 offset-md-4">
<!-- nav -->
<div class="row no-gutter" style="background-color: blue">
<nav class="col-12 navbar fixed-top navbar-toggleable-md">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
</nav>
</div><!-- end nav -->
<!-- main content -->
<div class="row no-gutter" style="background-color: green;">
<div class="col-12">
<p> main content </p>
</div>
</div><!-- end main content -->
</div><!-- end right side -->
</div>
</div>
https://jsfiddle.net/0ka85tmn/1/
I am having trouble getting the navigation bar to display correctly within its column. I've experimented with the position attribute but haven't been successful. Can anyone offer assistance?