extend side menu line for bootstrap page content

Currently, the line dividing the content and the side menu stops at the side menu's content. However, the content will be longer than the side menu. It makes the page uneven. I tried manipulating the page-content d-flex but i am not successful.

Using template from https://bootstrapious.com/p/admin-template

Below is the code for the side menu

  <div class="page-content d-flex align-items-stretch">
   <nav class="side-navbar">
      <!-- Sidebar Navidation Menus-->
      <ul class="list-unstyled">
        <li class="active"><a href="index.html"> <i class="icon-home"></i>Home </a></li>
        <li><a routerLink="/dashboard"> <i class="icon-picture"></i>Dashboard</a></li>
        <li><a routerLink="/tasknotification"> <i class="icon-padnote"></i>Task Management</a></li>
        <li><a routerLink="/candidate"> <i class="icon-user"></i>Candidate Management </a></li>
        <li><a routerLink="/job"> <i class="icon-interface-windows"></i>Job Management</a></li>
        <li><a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i
              class="icon-interface-windows"></i>Example dropdown </a>
          <ul id="exampledropdownDropdown" class="collapse list-unstyled ">
            <li><a href="#">Page</a></li>
          </ul>
        </li>
      </ul>
  </nav>

enter image description here

2 answers

  • answered 2019-09-10 05:53 Sangita Kendre

    modify media query

    @media (max-width: 1199px)
    nav.side-navbar {
        text-align: center;
        overflow: hidden;
    }
    

  • answered 2019-09-10 06:47 Ajit saw

    nav.side-navbar {
        text-align: left;
        min-width: 250px;
    }
    .page-content {
        min-width: calc(100% - 250px);
    }
    

    This way side-menu won't collapse. As I saw your fiddle I think that might work