Sidebar instead of dropdown when clicking hamburger (Bootstrap)

Question

When my navbar goes to the mobile type with the hamburger icon I want it to show a sidebar rather than the dropdown type that it does by default. Meanwhile I would like to keep it the top style navbar then on larger screens.

I hope that makes sense.

nav.html

<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
  <div class="container-fluid">
    {% load static %}
    <a href="{% url 'main:homepage_view' %}"><img class="nav-logo img-fluid"
        src="{% static 'img/logos/logo-white.png' %}"></a>

    <button class="navbar-toggler first-button" type="button" data-toggle="collapse" data-target="#navbarResponsive"
      aria-controls="#navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon1"><span></span><span></span><span></span></div>
    </button>

    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="{% url "main:homepage_view" %}">HOME</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url "dealers:dealers_view" %}">DEALERS</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url "main:contact_view" %}">CONTACT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url "news:blog_view" %}">NEWS</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

score -1 · Answer 1 · answered Jun 19 '20 at 02:05

AFAIK that's not directly possible. In other words bootstrap does not provide a way to collapse menus into a sidebars. That said, you want to add an event to the harmbuger icon that opens a custom sidebar you added which shows only on mobile.

Take a look:

Sidebar instead of dropdown when clicking hamburger (Bootstrap)

1 Answers1