Reputation: 113

Bootstrap 4 collapse sidebar into a navbar dropdown

I have a navbar and a sidebar to the left which I want to collapse to the navbar as a dropdown option in smaller screens. This is what it looks like in bigger screens

When the screen size is small, I want something like this to happen

Here are my codes

HTML body

<body>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-md navbar-dark bg-dark py-2">
    <a class="navbar-brand" href="#">CDR</a>
    <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 mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Login</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container-fluid flex-grow-1">
    <div class="row h-100">

      <!-- Sidebar -->
      <!-- Collapse as a navbar dropdown in smaller screens -->
      <div class="col-lg-3 col-sm-4 sidebar">
        <div class="sidebar-container mt-4 mx-2">
          <h4 class="text-capitalize py-2">Subjects</h4>
          <ul class="nav flex-column subjects">
            <li class="subject" data-subject="mathematics">
              <h5 class="subject-title mb-1">Mathematics</h5>
              <h6 class="subject-details m-0">
                <span class="teacher">Prof X.</span> |
                <span class="room">Room 113</span>
              </h6>
            </li>
            <li class="subject" data-subject="science">
              <h5 class="subject-title mb-1">Science</h5>
              <h6 class="subject-details m-0">
                <span class="teacher">Prof Y.</span> |
                <span class="room">Room 111</span>
              </h6>
            </li>
            <li class="subject" data-subject="english">
              <h5 class="subject-title mb-1">English</h5>
              <h6 class="subject-details m-0">
                <span class="teacher">Prof Z.</span> |
                <span class="room">Room 130</span>
              </h6>
            </li>
          </ul>
        </div>
      </div>

      <!-- Content -->
      <div class="col-lg-9 col-sm-8 content-container">
        <div class="row h-100">
          <div class="col-lg-9 col-md-9 col-sm-12 main-container"></div>
          <div class="col-lg-3 col-md-3 d-none d-md-block announcement-container">uwu</div>
        </div>
      </div>
    </div>
  </div>
</body>

CSS

html,
body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sidebar {
  border-right: 1px solid var(--light-grey);
}

.subjects {
  user-select: none;
}

.subject {
  padding: 15px;
  cursor: pointer;
  border: 1px solid var(--lighter-grey);
  border-radius: 5px;
  margin-bottom: 5px;
}

.subject-title {
  font-size: 0.8rem;
  letter-spacing: 2px;
}

.subject-details {
  text-transform: capitalize;
  color: var(--gray);
  letter-spacing: 2px;
}

.active {
  font-size: 1rem;
  background-color: var(--lighter-grey);
  border-left: 4px solid var(--gray);
  padding-left: 12px;
}

.content-container {
  background-color: var(--content-bg-grey);
}

So far as I've searched, I can't find a way to do this just yet. What would be the proper way to do it? Is there a bootstrap setting that will allow for this or do I need to use JS? I'm also using jQuery if this helps any.

Thanks!

Upvotes: 0

Answers (1)

Mohamad Hendy

Reputation: 51

just add this to your html code

<nav class="navbar navbar-expand-md navbar-dark bg-dark py-2">
    <a class="navbar-brand" href="#">CDR</a>
    <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 mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Login</a>
            </li>
            <!-- this will appear only in small screen -->
            <li class="nav-item dropdown d-md-none">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Subjects
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Mathematics</a>
                    <a class="dropdown-item" href="#">Science</a>

                    <a class="dropdown-item" href="#">English</a>
                </div>
            </li>
        </ul>
    </div>
</nav>
<div class="container-fluid flex-grow-1">
    <div class="row h-100">

        <!-- Sidebar -->
        <!-- Collapse as a navbar dropdown in smaller screens -->
        <!-- i was added two classes (d-md-block d-none) -->
        <div class="col-lg-3 col-sm-4 sidebar d-md-block d-none">
            <div class="sidebar-container mt-4 mx-2">
                <h4 class="text-capitalize py-2">Subjects</h4>
                <ul class="nav flex-column subjects">
                    <li class="subject" data-subject="mathematics">
                        <h5 class="subject-title mb-1">Mathematics</h5>
                        <h6 class="subject-details m-0">
                            <span class="teacher">Prof X.</span> |
                            <span class="room">Room 113</span>
                        </h6>
                    </li>
                    <li class="subject" data-subject="science">
                        <h5 class="subject-title mb-1">Science</h5>
                        <h6 class="subject-details m-0">
                            <span class="teacher">Prof Y.</span> |
                            <span class="room">Room 111</span>
                        </h6>
                    </li>
                    <li class="subject" data-subject="english">
                        <h5 class="subject-title mb-1">English</h5>
                        <h6 class="subject-details m-0">
                            <span class="teacher">Prof Z.</span> |
                            <span class="room">Room 130</span>
                        </h6>
                    </li>

                </ul>
            </div>
        </div>

        <!-- Content -->
        <div class="col-lg-9 col-sm-8 content-container">
            <div class="row h-100">
                <div class="col-lg-9 col-md-9 col-sm-12 main-container"></div>
                <div class="col-lg-3 col-md-3 d-none d-md-block announcement-container">uwu</div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Bootstrap 4 collapse sidebar into a navbar dropdown

Answers (1)

Related Questions