In my app, I am looking to implement a sidebar that will house the main URLs and brand name along with a navigation bar for other pages such as FAQ and about us.

However, I'm encountering an issue with positioning the sidebar absolutely. During my research, I came across this solution to prevent overlapping of the bars.

https://i.sstatic.net/ndKZJ.png

The problem primarily lies with the sidebar layout as shown in the image above.

Here's the HTML structure:

<div class="row">
    <div class="col-md-2 bg-dark">
       <nav class="navbar navbar-light bg-dark" id="sidebar">
           <ul class="navbar-nav mr-auto">
               <div class="brand-panel">
                   <li class="nav-item active">
                       <a class="navbar-brand" href="{% url 'home' %}"><h5>Sentizer <small class="one" > Beta</small></h5></a>
                   </li>
               </div>
               <li class="nav-item active">
                   <a class="nav-link" href="{% url 'patients:dashboard' %}">Dashboard</a>
               </li>
               <li class="nav-item">
                    <a class="nav-link" href="{% url 'patients:patients_list' %}">Patients</a>
               </li>
               <li class="nav-item">
                    <a class="nav-link" href="{% url 'accounts:tickets' %}">Tickets</a>
               </li>
               <li class="nav-item">
                    <button type ="button" class="button1 nav-link" data-toggle="modal" data-target="#modalContactForm">Feedback</button>
               </li>
           </ul>
       </nav>
    </div>

  <div class="col-md-10">
      <div class="row">
           <div class="col-md-12 px-0">
               <nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" id="top-nav1" >
                    <div class="container-fluid">
                         <form class="form-inline" action="{% url 'patients:patient_search' %}" method="GET" >
                             <input class="form-control mr-sm-2" id="sebar" type="text" size="45%" placeholder="Search" aria-label="Search" name="q">
                             <button class="btn btn-outline-primary btn-sm" type="submit" ><i class="material-icons">search</i></button>
                         </form>
                         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"></span>
                         </button>

                         <div class="collapse navbar-collapse" id="navbarSupportedContent">
                               <ul class="navbar-nav ml-auto">
                                    <li class="nav-item">
                                        <a class="nav-link" href="{% url 'about' %}">About us</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="{% url 'faq' %}">FAQ</a>
                                    </li>
                                     <li class="nav-item">
                                     </li>
                                    {% if user.is_authenticated %}
                                    <li class="nav-item dropdown">
                                         <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">{{request.user.first_name}} {{request.user.last_name}}<b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li class="dropdown-item">
                                                <a class="nav-link" href=" {% url 'accounts:details' pk=request.user.pk %}">Profile</a>
                                            </li>
                                            <li class="dropdown-item text-nowrap">
                                                <a class="nav-link" href="{% url 'accounts:logout' %}">Sign out</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="nav-item">
                                        <a href="#" id="searchtoggl"><i class="fa fa-search fa-lg"></i></a>
                                    </li>
                                    {% else %}
                                     <li class="nav-item text-nowrap">
                                         <a class="nav-link trigger-btn" href="#loginModal" data-toggle="modal">Login</a>
                                     </li>
                                    {% endif %}
                               </ul>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>

I attempted adjusting the position of

<nav class="navbar navbar-light bg-dark" id="sidebar">

, but it seems to be dependent on the background div preceding it, resulting in no changes. How can I resolve this issue and is there a more effective way to arrange the bars on the page without any overlap?