Topic: Navbar expanding on page load

Miguel Dorta free asked 3 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) {
  if (window.innerWidth >= {

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="/img/Logo1.svg" alt="Logo de Asociación Cultural Silbo Gomero" />

    <!-- Toggle button -->
      aria-label="Abrir menú"
      <i class="fas fa-bars"></i>

    <!-- 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 class="nav-item mx-1">
          <a id="navQuienesSomos" class="nav-link" href="#!">Quiénes somos</a>
        <li class="nav-item mx-1">
          <a id="navContacto" class="nav-link" href="#!">Contacto</a>
        <li class="nav-item mx-1">
          <a id="navNoticias" class="nav-link" href="#!">Noticias</a>
        <li class="nav-item mx-1">
          <a id="navGaleria" class="nav-link" href="#!">Galería de imágenes</a>

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

Krzysztof Wilk staff answered 3 years ago


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

Miguel Dorta free answered 3 years ago

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

As you can see, it works fine in the snippet, but if you download the latest version from 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.

Grzegorz Bujański staff answered 3 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:

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

Miguel Dorta free commented 3 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.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: 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