Making a navbar with 2 rows collapsible

Question

I am using bootstrap5 to make a navbar with 2 rows that is collapsible when it goes into mobile/smaller window.

Its all working but I don't think its the best way to achieve it and on top of that I have a bug when I forget to toggle it off and resize the window the menu stay.

See this GIF for what it looks like right now:

I had to create a secondary hidden menu in order to show/hide after it collapse past certain screen size, which does not look ideal.

Is there a proper way to achieve this navbar with bootstrap without having all these hacks I had to use or a proper way to achieve it?

With exception to the bug of the menu staying if u don't toggle it off it all looks the way I want it to.

I believe there is a better way to do this, but I am not experienced enough to figure it out by myself.

This is my current code:


    
        
            My LOGO HERE

            

            
                
                    Home
                    Categories
                    Tags
                    Contact Us
                    
                     Sign Up
                     Login
                
            

            
                
                    
                    
                
            
        

        
            
                Home
                Categories
                Tags
                Contact Us
            
            
                 Sign Up
                 Login

I had to further add this javascript to make it all work

$(document).ready(function()
{
    $('#navbarCollapseBtn').click(function ()
    {
        if ($('#navbarCollapse').css('visibility') === 'hidden')
        {
            $('#navbarCollapse').css('visibility', 'visible', 'important');
            $("#navbarCollapse").collapse("show");
        }
        else
        {
            $('#navbarCollapse').css('visibility', 'hidden', 'important');
            $("#navbarCollapse").collapse("hide");
        }
        return false;
    });
});

Rok Benko · Accepted Answer

Here you go...

.navbar-nav {
  width: calc(100vw - 24px);
}

.navbar-brand {
  position: absolute;
  top: calc(0px + 8px);
  padding: 8px;
}

@media screen and (max-width: 767px) {
  .navbar-brand {
    position: relative;
    top: 0;
  }
}

EDIT

.navbar-nav {
  width: calc(100vw - 24px);
}

.navbar-brand {
  position: absolute;
  top: calc(0px + 8px);
  padding: 8px;
}

.move-right a {
  display: inline-block;
}

@media screen and (max-width: 767px) {
  .navbar-brand {
    position: relative;
    top: 0;
  }
  
  .move-right a {
    display: block;
  }
}

Making a navbar with 2 rows collapsible

Answers (1)

Related Questions