Sidebar not responsive - html

Question

I currently have 2 problems with my sidebar.
The upper part is cut off on mobile devices.
The sidebar is unfolded by default on mobile devices. It shouldn’t be like this. And when it is folded, the content of the page does not shift to the left. However, the content should shift to the left.
I use bootstrap 5.
.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%);
}
#media (max-width: 767px) {
.main {
padding-right: 40px;
padding-left: 220px;
/* 180 + 40 */
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<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">
{% block body %}{% endblock %}
</div>
</div>
</div>
</div>

Answer 1

You can use CSS Media Queries to determine what action to do based on the screen size. Here, you would want to change the position/size of the sidebar based on the screen size.
#media (max-width: 600px) {
*This is for phones, for example (you might need to find more accurate pixel counts)*
}
Edit:
I just saw that you already have Media Queries. Try changing the size and position too, though, not just the padding.
Edit:
Here's a quick demo. This should be more than enough to solve your issue. Here's another link to help you. I would appreciate if you marked this answer as correct. Thanks!
function openNav() {
const a = document.getElementById("sidebarMenu");
const b = document.getElementsByClassName("CLASS NAME HERE");
a.style.width = "220px";
for(var i = 0; i < b.length; i++) {
b[i].style.width = "100%";
}
}
function closeNav() {
const a = document.getElementById("sidebarMenu");
const b = document.getElementsByClassName("CLASS NAME HERE");
a.style.width = "0";
for(var i = 0; i < b.length; i++) {
b[i].style.width = "0";
}
}
.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%);
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media (max-width: 767px) {
.sidebar {
padding: 120px 0 0;
}
}
<span onclick="openNav()">open</span>
<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 collapse">
<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">
</div>
</div>
</div>
</div>