Check out my solution on Plunkr to see the issue I'm facing: Plunkr
I'm dealing with a layout that includes a menu on the left and page contents on the right. My goal is to have the menu fixed in place so that it doesn't move when the page contents require vertical scrolling.
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<div class="main-nav">
<!--Menu content here-->
</div>
</div>
<div class="col-sm-10">
<!--Page contents here-->
</div>
</div>
</div>
This is achieved with the following CSS:
.main-nav {
position: fixed;
left: 0;
right: 0;
z-index: 1;
}
The issue arises when I want the links within the menu to span only the width of the col-sm-2 element, as the position: fixed property causes them to take up the entire width of the page instead.