Custom Bootstrap's hamburger menu

Question

I have a vertical nav and I have a breakpoint for the hamburger menu to be showed on medium screens. When the hamburger menu shows up I want the text after the icons to be hidden (because it takes up a lot of space) and see just the icons, and if I click the hamburger menu I want the full menu to be showed again (as it is).

HTML

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>

<div class="collapse navbar-collapse" id="navbarNav">
    <ul class="nav navbar-sidenav">
        <li class="nav-item">
            <a class="nav-link nav-link-p" href="index.html"><i class="fas fa-tachometer-alt mr-4"></i>Dashboard</a>
        </li>

        <li class="nav-item">
            <a class="nav-link nav-link-p" href="users.html"><i class="fas fa-users mr-4"></i>Users</a>
        </li>
        <li class="nav-item">
            <a class="nav-link nav-link-p" href="fatura.html"><i class="fas fa-users mr-4"></i>Admins</a>
        </li>
    </ul>
</div>

CSS:

.aside-section {
    margin: 0;
    float: left;
    width: 280px;
    height: 100%;
    background-color: #f1f1f1;
}

.navbar-sidenav {
    position: relative;
    flex-direction: column;
    width: 170px;
    background-color: #f1f1f1;
}

.nav-link-p {
    padding: 0;
    margin: 28px 0 28px 10px;
}


@media screen and (max-width: 767.98px) {
    /* Some code needs to be here */
}

I made a codepen for this https://codepen.io/ibrahim-kunushefci/pen/ewwWQv

Luís P. A. · Answer 1 · 2019-07-16T08:14:35.027

You must made a few changes in the HTML. Wrap you text with a <span>and then use media queries.

HTML

<!-- Make the window larger than 767px to see the nav items
     Smaller than 767px to see the hamburger menu -->
<nav class="navbar navbar-expand-md navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="nav navbar-sidenav">
            <li class="nav-item">
                <a class="nav-link nav-link-p" href="index.html"><i class="fas fa-tachometer-alt mr-4"></i><span>Dashboard</span></a>
            </li>

            <li class="nav-item">
                <a class="nav-link nav-link-p" href="users.html"><i class="fas fa-users mr-4"></i><span>Users</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link nav-link-p" href="fatura.html"><i class="fas fa-users mr-4"></i><span>Admins</span></a>
            </li>
        </ul>
    </div>
</nav>

CSS

.aside-section {
  margin: 0;
  float: left;
  width: 280px;
  height: 100%;
  background-color: #f1f1f1;
}

.navbar-sidenav {
  position: relative;
  flex-direction: column;
  width: 170px;
  background-color: #f1f1f1;
}

.nav-link-p {
  padding: 0;
  margin: 28px 0 28px 10px;
}

@media screen and (max-width: 767.98px) {
  /* Some code needs to be here */
  ul.nav li a span {
    display: none;
  }
  .navbar-sidenav {
    display: inline-block;
    width: auto;
  }
  ul.nav li a i {
    margin-left: 10px;
    margin-right: 16px !important;
  }
}

DEMO HERE

Carol Skelly · Answer 2 · 2020-02-25T12:24:56.513

I think you'd need JS (jQuery) to make the hamburger collapse menu have 3 states:

closed with text hidden
open with text hidden
open with text shown

You can hook into the hide and hidden events of the Collapse component....

$('#navbarNav').on('hide.bs.collapse', function (e) {
  if ($('.nav-text.d-none').length > 0) {
      // prevent nav from hiding, and show the text
      e.preventDefault();
      $('.nav-text').removeClass('d-none');
  }
});

$('#navbarNav').on('hidden.bs.collapse', function (e) {
    // rehide icons when nav closes
    $('.nav-text').addClass('d-none');
});

Add some CSS to ensure the text always shows on larger widths:

@media screen and (min-width: 768px) {
    .nav-text.d-none {
        display: inline !important;
    }
}

https://codeply.com/go/i7Hjqmy8bo

Related: Create a responsive navbar sidebar "drawer" in Bootstrap 4?

Custom Bootstrap's hamburger menu

2 Answers2