Navbar state - manually change from normal state to collapsed state

Question

I have the following navbar:

  <nav class="navbar fixed-top navbar-expand-sm navbar-light">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto ">
          <li class="nav-item">
            <a class="nav-link link-light active" href="#a">A</a>
          </li>
          <li class="nav-item">
            <a class="nav-link link-light" href="#b">B</a>
          </li>
          <li class="nav-item">
            <a class="nav-link link-light" href="#c">C</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

What I'm trying to do is that in case the display resolution is big enough for it to appear as not collapsed, then if the user's scroll Y isn't on top, the navbar will appear as collapsed (no matter the display size), this is what i'm trying using js, but it's not working and i wasn't successful in finding something helpful on how to control the actual navbar state (collapsed\not collapsed)...appreciate any help.

let navcollapse = document.getElementById('navbarSupportedContent')
window.addEventListener('scroll', (e) => {
    if(window.scrollY == 0) { // top position
      // open the navbar
    } else {
       navcollapse.collapse = 'hide'; // collapse it
    }
});

-if display is small for it to be collapsed by default then nothing changes and navbar will remain in collapsed state no matter if scroll Y is on top or not.

score 1 · Accepted Answer · answered Oct 13 '21 at 17:54

Just when the idea of changing the Sass file grid-breakpoints came to mind, I stumbled on a bootstrap break point that I wasn't familiar with... the 'XS', which will collapse the navbar on big screens since it'll do that for dimensions bigger than or equal to 576px (while the 'SM' break point takes effect on dimensions smaller than 576px so if the screen is small enough, the navbar will stay collapsed either way as requested).
Anyways, this is the code for collapsing the navbar (added an ID for the nav element in html file, the js code):
JS code:

window.addEventListener('scroll', function() {
  if (window.scrollY == 0) { // top position - expand navbar
    document.getElementById('navbarscroll-spy').classList.remove('navbar-expand-xs');
    document.getElementById('navbarscroll-spy').classList.add('navbar-expand-sm');
  } else { // scrolled - collapse navbar
    document.getElementById('navbarscroll-spy').classList.remove('navbar-expand-sm');
    document.getElementById('navbarscroll-spy').classList.add('navbar-expand-xs');
  }
}

html:

  <nav id="navbarscroll-spy" class="navbar fixed-top navbar-expand-sm navbar-light">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto ">
          <li class="nav-item">
            <a class="nav-link link-light active" href="#a">A</a>
          </li>
          <li class="nav-item">
            <a class="nav-link link-light" href="#b">B</a>
          </li>
          <li class="nav-item">
            <a class="nav-link link-light" href="#c">C</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Navbar state - manually change from normal state to collapsed state

1 Answers1