text behind Sidebar - html

Question

I have the problem that as soon as I use an iPad / tablet and no PC, the content / text disappears behind the sidebar.
How can I make sure that the sidebar works as a “borderline” and that no text / content is displayed behind the sidebar?
I use bootstrap 5.
My html code:
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
{% if app.request.get('_route') == 'app_dashboard' %}
<a class="nav-link active" aria-current="page" href="{{ path('app_dashboard') }}">
<span data-feather="home"></span>
Test
</a>
{% else %}
<a class="nav-link" aria-current="page" href="{{ path('app_dashboard') }}">
<span data-feather="home"></span>
Test
</a>
{% endif %}
</li>
<li class="nav-item">
{% if app.request.get('_route') == '' %}
<a class="nav-link active" aria-current="page" href="#">
<span data-feather="file"></span>
Test
</a>
{% else %}
<a class="nav-link" aria-current="page" href="#">
<span data-feather="file"></span>
Test
</a>
{% endif %}
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-plus"></span>
Test
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Test
</a>
</li>
</ul>
</div>
</nav>
</div>
My own sidebar css:
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
padding: 45px 0 0;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
width: 220px;
}
.sidebar .active {
border-radius: 5px;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}
problem:
Screenshot

Answer 1

This happens because you haven't split your sidebar and your content. You've basically just placed it onto your page without considering that the sidebar & content will be 2 different components. Since you're using Bootstrap I would recommend using Grid System. Like this:
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
padding: 45px 0 0;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
width: 220px;
}
.sidebar .active {
border-radius: 5px;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="col-md-12 col-sm-12">
<div class="row">
<div class="col-md-4 col-sm-4">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{{ path('app_dashboard') }}">
<span data-feather="home"></span> Test
</a>
<a class="nav-link" aria-current="page" href="{{ path('app_dashboard') }}">
<span data-feather="home"></span> Test
</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<span data-feather="file"></span> Test
</a>
<a class="nav-link" aria-current="page" href="#">
<span data-feather="file"></span> Test
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-plus"></span> Test
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span> Test
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-md-8 col-sm-8">
<h1>Hello World</h1>
</div>
</div>
</div>
</div>
Something else to note, for medium to smaller devices you will have to apply different styling's so this is where the power of bootstraps grid system will come in handy. Grid Options