Navbar expanding on page load


Topic: Navbar expanding on page load

Miguel Dorta asked 4 years ago

Expected behavior

Collapse element not expanding when I declare it.

Actual behavior

Collapse element expands when I declare it.

Resources (screenshots, code snippets etc.)

UPDATE: I created a minimal example in a snippet in the second reply. I left the original question here for historic reasons. I'd be glad to change it if this kind of post-reply doesn't follow the forum guidelines.


I could isolate the problem to this script (not loading it removes the problem), which makes me think that the Collapse object expands when declaring it.

import { Collapse } from 'mdb-ui-kit';
import breakpoint from '../common/breakpoint';
import { navElements, cards } from './consts';

const navCollapse = new Collapse(document.getElementById('navbarSupportedContent'));

function scrollCollapsingNav(elementToScroll) {
  elementToScroll.scrollIntoView();
  if (window.innerWidth >= breakpoint.md) {
    return;
  }
  navCollapse.hide();
}

export default function scrollClick() {
  navElements[0].addEventListener('click', () => scrollCollapsingNav(document.body));
  for (let i = 0; i < cards.length; i++) {
    navElements[i + 1].addEventListener('click', () => scrollCollapsingNav(cards[i]));
  }
}

Just for the reference, the code of the navbar in the body is this:

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top shadow-4">
  <div class="container-fluid">
    <!-- Logo -->
    <div class="navbar-brand" onclick="document.body.scrollIntoView()">
      <img src="https://mdbcdn.b-cdn.net/img/Logo1.svg" alt="Logo de Asociación Cultural Silbo Gomero" />
    </div>

    <!-- Toggle button -->
    <button
      class="navbar-toggler"
      type="button"
      data-mdb-toggle="collapse"
      data-mdb-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Abrir menú"
    >
      <i class="fas fa-bars"></i>
    </button>

    <!-- Elements -->
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item mx-1">
          <a id="navInicio" class="nav-link active" href="#!">Inicio</a>
        </li>
        <li class="nav-item mx-1">
          <a id="navQuienesSomos" class="nav-link" href="#!">Quiénes somos</a>
        </li>
        <li class="nav-item mx-1">
          <a id="navContacto" class="nav-link" href="#!">Contacto</a>
        </li>
        <li class="nav-item mx-1">
          <a id="navNoticias" class="nav-link" href="#!">Noticias</a>
        </li>
        <li class="nav-item mx-1">
          <a id="navGaleria" class="nav-link" href="#!">Galería de imágenes</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

I've been trying different things for a few hours and can't make it not expand when loading.


Grzegorz Bujański staff answered 4 years ago

Why don't you just set the appropriate class .navbar-expand{-sm|-md|-lg|-xl|-xxl}?

Here you can check what values ​​are assigned to each breakpoint: https://mdbootstrap.com/docs/standard/layout/breakpoints/#section-available-breakpoints

For example by setting the class .navbar-expand-xxl navbar will be collapse if viewport sizes are smaller than 1400px.


Miguel Dorta commented 4 years ago

That's on the first line of the HTML code. See, I use navbar-expand-md.

What that code's for is to:

  1. Scroll to a position in the page when clicking on links.

  2. Hide the navbar when you click them.

I guess someone will ask why I'm doing the 1st step in JS instead of putting the ID of the section in the href, it's because I found that, in Android (with Chrome and Firefox), when you click one of those navbar links it would scroll but not all the way, I guess it was due to the scrollSpy changing the button state, I don't know, the thing is that the event 'click' -> scrollIntoView() doesn't have such behaviour.

I check the breakpoint because if you do the Collapse.hide() when the navbar is displayed in a big screen, the text does a weird animation.


Ok, this is a weird update. I condensate it into a minimal example, which is this.

https://mdbootstrap.com/snippets/standard/miguel_dorta/2824505

As you can see, it works fine in the snippet, but if you download the latest version from https://mdbootstrap.com/docs/standard/getting-started/installation/ and replace the index.html for the code of the snippet, the strange behaviour appears.

It looks like a bug to me, so I will refer from now on as such.


Krzysztof Wilk staff answered 4 years ago

Hi!

That was not a bug. You initialized Collapse twice and this strange behavior was caused by it.

As you can see in our documentation - we initialize a Collapse inside a NavBar using data-attributes. In your code, you have data-attrs and additional js init, which makes some trouble.

Just remove this line:

const navCollapse = new mdb.Collapse(document.getElementById('navbarSupportedContent'));

And your navbar should be hidden by default :)

Best regards


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 3.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No