navbar doesn't expand on mobile with bootstrap5

Question

I'm making a website with Bootstrap 5 and my navbar doesn't work. When I'm on mobile it does not expand.

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*
#FF3633 - Vermelho

*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
/* estilo - header */
.navbar {
    background-color: #131313;
    padding: 1rem 8rem;
    z-index: 1000;

}

.navbar .navbar-brand {

    font-size: 1.4rem;
    font-weight: 800;
}

#navbarSupportedContent > ul > li:nth-child(n) > a {
  color: #fff;
  font-size: 1.1rem;
  padding: 0 0.8rem;
}

#navbarSupportedContent > ul > li:nth-child(n) > a:hover {
    color: #FF3633;
}

#navbarSupportedContent button {
    background-color: #FF3633;
    font-weight: 600;
    padding: 0.4rem 1.4rem;
    border-radius: 30px;
    outline: none;
}

#navbarSupportedContent button:hover {
    background-color: #CC3036;
}



    
      
        
      
      
      
        
          
            Quem Somos
          
          
            Serviços
          
          
            Serviços
          
          
            Contato
          

        
          
        
    



    
    
        Suporte Linux e Cloud
        Criando um paralelo entre baixo custo, disponibilidade, praticidade e satisfação
         SAIBA MAIS  

    



    
      
        
      
      
      
        
          
            Quem Somos
          
          
            Serviços
          
          
            Serviços
          
          
            Contato
          

        
          
        
    



    
    
        Suporte Linux e Cloud
        Criando um paralelo entre baixo custo, disponibilidade, praticidade e satisfação
         SAIBA MAIS

button pic

user_6127393 · Answer

Bootstrap 5 has namespaced the data attribute names with data-bs-*.
Change the following:

data-target="#navbarSupportedContent"

to this:

data-bs-target="#navbarSupportedContent"

user_14265389 · Answer

In your button in which you are collapsing the navbar then main attribute tags are not there. Main attributes used are data-toggle="collapse" data-target=".nav-collapse". Second change is that see if you added these links or add bundle from https://getbootstrap.com/docs/5.0/getting-started/introduction/

Hope my answer helps you

user_12681808 · Answer

I have managed to solve it with js codes from my external js file which I had already included on the page before closing of body tag.

Below here are my js codes which I used to and managed to solve the issue:

$(document).ready(function(){

  //--Navbar_Toggle_icon--//
  NavItemsStatus = '';
  $('.navbar-toggler-icon').mousedown(function(){
    //---Check if the NavItems are opened, if so then close them, otherwise open them--//
    if((NavItemsStatus == "")|| (NavItemsStatus == undefined)){
      NavItemsStatus = 'on';
      //--Do nothing here as the nav items are sliding down after clicked for the first time--// 
    }else if((NavItemsStatus == "off")){
      NavItemsStatus = 'on';
      $("#navbarNavAltMarkup").show(600); //the id which was called on data-bs-target
    }else{
      NavItemsStatus = 'off';
      $("#navbarNavAltMarkup").hide();
      $("#navbarNavAltMarkup").css('height','0px');
    }
  })

});

So for your case the id to use is #navbarSupportedContent.

user_15253389 · Answer

for the navbar to work you need to include some javascript (even if you will not use it). The provided links in bootstrap -> get started-> JS do not really work.

So to make it fast and easy for you, here is the header where you need to add your title.


  
  TinDog

user_16516594 · Answer

There is my universal working solution:

$(document).ready(function(){
  $('a[data-bs-toggle="collapse"]').mouseup(function(){
    var expanded = $(this).attr('aria-expanded');
    if(expanded=="true"){
      setTimeout(() => {
        hide_collapse(this);
      }, 100);
    }
  })
  function hide_collapse(element){
    var aria_control = $(element).attr('aria-controls');
    $("#"+aria_control).removeClass("show");
    $(element).attr('aria-expanded',"false");
  }
});

navbar doesn't expand on mobile with bootstrap5

5 Answers