Currently, I am working on implementing Bootstrap with sidebars positioned on the left and right. While using Bootstrap works effectively in pushing the body down on mobile devices, I have encountered an issue with the sidebar not being pushed down as expected because it is styled using CSS rather than Bootstrap.
Here is my HTML code:
<!-- Left sidebar -->
<div class="sidenav">
<a class='active'">
Home
</a>
</div>
<div class="container-fluid mt-1 mt-sm-1 mt-md-3 mt-lg-5">
<div class="row">
<div class="col-8 offset-2 col-sm-10 offset-sm-1 col-md-10 offset-md-1 col-lg-10 offset-lg-1">
<v-fade-transition>
<router-view></router-view>
</v-fade-transition>
</div>
</div>
</div>
<!-- Right sidebar -->
<div class="sidenav">
<a class='active'">
Twitter
</a>
</div>Along with the corresponding CSS:
.sidenav {
height: 100%;
width: 150px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
padding-top: 160px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
color: #1c465b;
font-family: 'poppins', sans-serif;
padding-top: 80px;
margin-bottom: 35px;
text-decoration: none;
font-size: 16px;
font-weight: bold;
color: #818181;
display: block;
transform: rotate(90deg);
white-space: nowrap;
transform-origin: center;
}
.sidenav a:hover {
color: #f1f1f1;
}I am aiming to achieve the same behavior of pushing the body down when using these sidebars.