I am facing an issue with my vertical Bootstrap sidemenu that transitions to horizontal layout responsively.
When the sidemenu switches to a horizontal display, it ends up being hidden behind other elements, particularly on smaller devices. The example demonstrates how the sidemenu gets obscured by text:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head></head>
<body style="padding-top:55px">
<nav class="navbar navbar-expand-sm navbar-light fixed-top bg-light">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-md-center text-left">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-12 col-md-4">
<div class="position-fixed bg-dark">
<div class="row">
<ul class="nav overflow-auto flex-md-column flex-nowrap">
<li class="nav-item">
<a class="nav-link" href="#">Link 123</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 123</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 123</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 123</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-8">
<div class="row">
<div class="d-flex">
<h1>Some text</h1>
</div>
</div>
</div>
</div>
</div>
</body>
</html>https://codepen.io/coffeeeecup/pen/ZEYpBJO
The issue is likely due to the position-fixed property. However, I need this attribute for the sidemenu to remain fixed when scrolling. How can I make sure that elements are positioned below the sidemenu with position-fixed?
Thank you in advance!