How to style fullscreen menu under default bootstrap toggler?

Question

I am building my first page using Bootstrap Studio and I am wondering how I could achieve a menu design like this, or similar: https://codemyui.com/fullscreen-overlay-navigation-menu/

When I click on menu toggle, it looks like this: https://i.sstatic.net/WPu07.jpg

My website link: https://kreatika.bss.design/

Thanks for any advice


    
        
        
        
            
                Úvod
                Služby
                Ukázky práce
                Náš příběh
                Akademie
                Kariéra
                Kontakt
                
            
        
    



  [1]: https://i.sstatic.net/c5Dnp.jpg

joshmoto · Accepted Answer

https://i.sstatic.net/M9VgZ.png

If its just a fixed fading menu with centered .navbar-nav, then the below answer might help. Though there are a lot of examples in your first link so hard to tell what you want exactly.

I've still not found away to disable the Bootstrap 4 navbar .collapsing toggle class. I can't find anything in the documentation to turn it off, which means you always have a height transition when opening/closing the mobile navbar.

But you can override the .collapsing class with CSS, though seems a little hacky for such a simple thing.

After a bit of fiddling I found I could override the collapsing class animation using .collapsing[style*="height"].

Bootstrap 4 natively adds the attribute style="height:...px;" to the .navbar-collapse div via javascript when the .navbar-toggler button is first clicked. But not on the second closing click.

See my codeply example link below using Bootstrap 4... (using SASS).

https://www.codeply.com/go/GXRF6aA5Du

.navbar {

    .navbar-toggler {
        z-index: 1000;
    }

    .navbar-collapse {

        @include media-breakpoint-down(md) {
            background: rgba(#000,.85);
            opacity: 0;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            transition: opacity 0.35s ease;
            display: flex;
            flex-direction: column;
            align-content: center;
            text-align: center !important;

            &.collapse {
                opacity: 0;
                pointer-events: none;
                display: flex;
            }

            &.collapsing[style*="height"] {
                opacity: 1;
                height: 100vh !important;
            }

            &.collapsing {
                opacity: 0;
                height: 100vh;
            }

            &.collapse.show {
                opacity: 1;
                pointer-events: auto;
            }

            .navbar-nav {
                margin-right: initial !important;
                margin-top: auto;
                margin-bottom: auto;
            }

        }

    }

}

@include media-breakpoint-down(md) {

    .navbar-nav {
        margin-left: initial !important;
    }

}

This is the CSS output below if your not using SASS.

If you drop the below CSS into the DOM on your site it looks like this...

https://i.sstatic.net/M9VgZ.png

.navbar .navbar-toggler{
    z-index:1000
}
@media (max-width: 991.98px){
    .navbar .navbar-collapse{
        background:rgba(0,0,0,0.85);
        opacity:0;
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        transition:opacity 0.35s ease;
        display:flex;
        flex-direction:column;
        align-content:center;
        text-align:center !important
    }
    .navbar .navbar-collapse.collapse{
        display:flex;
        opacity:0;
        pointer-events:none
    }
    .navbar .navbar-collapse.collapsing[style*="height"]{
        opacity:1;
        height:100vh !important
    }
    .navbar .navbar-collapse.collapsing{
        opacity:0;
        height:100vh
    }
    .navbar .navbar-collapse.collapse.show{
        opacity:1;
        pointer-events:auto
    }
    .navbar .navbar-collapse .navbar-nav{
        margin-right:initial !important;
        margin-top:auto;
        margin-bottom:auto
    }
}

@media (max-width: 991.98px) {
    .navbar-nav {
        margin-left: initial !important;
    }
}

And a stackoverflow demo too using the CSS (not the sass)...

MAIN {
  padding-top: 30px;
  padding-bottom: 30px;
  margin-top: 56px;
  height: 3000px
}

.navbar .navbar-toggler {
  z-index: 1000
}

@media (max-width: 991.98px) {
  .navbar .navbar-collapse {
    background: rgba(0, 0, 0, 0.85);
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity 0.35s ease;
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center !important;
    overflow-y: scroll;
    overflow-x: hidden
  }
  .navbar .navbar-collapse.collapse {
    display: flex;
    opacity: 0;
    pointer-events: none
  }
  .navbar .navbar-collapse.collapsing[style*="height"] {
    opacity: 1;
    height: 100vh !important
  }
  .navbar .navbar-collapse.collapsing {
    opacity: 0;
    height: 100vh
  }
  .navbar .navbar-collapse.collapse.show {
    opacity: 1;
    pointer-events: auto
  }
  .navbar .navbar-collapse .navbar-nav {
    margin-right: initial !important;
    margin-top: auto;
    margin-bottom: auto
  }
}

@media (max-width: 991.98px) {
  .navbar-nav {
    margin-left: initial !important;
  }
}










  Fixed navbar
  
  
    
      
        Home (current)
      
      
        Link
      
      
        Disabled
      
    
  



  
    Navbar example
    This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.
    View navbar docs »

How to style fullscreen menu under default bootstrap toggler?

Answers (1)

Related Questions