How to make a fixed sidebar menu that is also responsive on both computer and mobile?

Question

I'm using Bootstrap 5 to make a resume web page. I seem to have got what I want right now but I do not know how to make the sidebar fixed w/o overlaying the display of other content when the page is resized (smaller).

I tried using flex but it only splits the content of right side and the left side into two when the page is smaller. The content of the right side should be below the menu when the page is smaller.

Code Snippet

<!--Left Side-->
<div class="row">
  <div class="container-lg col-lg-3 p-3 mb-2 bg-secondary-subtle text-emphasis-secondary">

    <!--Sidebar Menu-->
    <div class="container-fluid p-1 mb-2 bg-secondary text-white text-center">
      <p>ABOUT ME</p>
    </div>
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link text-body" href="#Personal Info">Personal Info</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-body" href="#Work Experience">Experience</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-body" href="#Skill">Skill</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-body" href="#Education">Education</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-body" href="#Contact">Contact</a>
      </li>
    </ul>
  </div>
  <!--Right side-->
  <div class="d-flex flex-column bd-highlight mb-3 container-lg col-lg sticky-lg-top">
    <!--right side content-->
  </div>
</div>


<!-- Bootstrap 5.3.2 -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Answer 1

For you need, follow these instructions:

1- use bootstrap's grid: Divide your page into two parts. For the sidebar, use col-lg-3, and for the main section, use col-lg-9. This means that on larger screens, your sidebar takes up 1/4th of the screen, and the main content takes up the rest.

2- make the sidebar fixed: use css to fixed the position. But make sure it doesn't overlap your main content.

3- make responsive: use Bootstrap's classes like flex-lg-row for large screens and flex-column for smaller ones.

<div class="d-flex flex-column flex-lg-row">
    <!-- Sidebar -->
    <div class="col-lg-3 p-3 bg-secondary position-fixed">
        <!-- Sidebar items -->
    </div>

    <!-- Main Content -->
    <div class="col-lg-9 offset-lg-3">
        <!-- Main content elements -->
    </div>
</div>

Css part would be something like this:

@media (min-width: 992px) {
    .position-fixed {
        top: 0;
        left: 0;
        width: 25%;
    }

    .offset-lg-3 {
        margin-left: 25%;
    }
}