Bootstrap 3 mobile menu 100% height

full screen menu bootstrap
bootstrap 4 navbar height decrease
bootstrap navbar height
full page menu
bootstrap nav tab height
bootstrap 3.3 7 mobile menu
react bootstrap change navbar height
overlay menu

Whats the best method for getting 100% height for collapse bootstrap menu (mobile).

.navbar-collapse { max-height: 100% !important; min-height: 100% !important; height: 100%;}

is not really working here

You could try using the vh CSS unit:

.navbar-collapse {
    height: 100vh;

Bootstrap Mobile Menu 100%, Bootstrap puts absolute positioning on their .dropdown-menu class. .navbar-​collapse { height: calc(100vh - 50px); } </style> <div class="navbar navbar-​inverse data-toggle="dropdown" href="#">Option 3</a> <ul class="dropdown-​menu"  How to build a mobile responsive menu that will always have a 100% height and show all its list items Tag: html , css , css3 , responsive-design I am working on a mobile responsive website.

.navbar-collapse.collapse {
    transition: height 0.2s;
.navbar-collapse.collapsing {
    height: 0 !important;
} {
    max-height: none;
    height: 100vh;

How To Create a Full screen Overlay Navigation, Responsive Bottom Nav Bottom Border Nav Links Right Aligned Menu Links Learn how to create a full screen overlay navigation menu. Height & width depends on how you want to reveal the overlay (see JS below) */ Step 3) Add JavaScript: Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars. Browse other questions tagged html twitter-bootstrap-3 drop-down-menu navbar dropdown or ask your own question. Blog The Interactive News Platform for Everyone

None of the previous answers worked for me. My .navbar-collapse has position: fixed; but I assume this is also the case for the original question.

The key to solve this was to have the child element of .navbar-collapse to have height: 100vh.

Note: I'm using Bootstrap 4, so is now

HTML code:

<div id="main-nav" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">


.navbar-collapse {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
} {
    height: 100vh;
.navbar-nav {
    height: 100vh;

Change Bootstrap Navbar height, is part of a short tutorial on -​-to-change-bootstrap-navbar-height. <nav class="navbar navbar-default">. First of all, sorry for my poor english :S. I want a responsive full height grid using bootstrap 3. My problem is the grid, I don't know how to set 100% height to container and the inside divs. Wid

This will do the trick!

.navbar-collapse { 
    max-height: 100% !important; 

Fullscreen Menu using Bootstrap Collapse ABSOLUTE, xxxxxxxxxx. 9. 1. #menu {. 2. background: hsla(1,0%,100%,.9);. 3. position: absolute;. 4. top: 0;. 5. right: 0;. 6. left: 0;. 7. min-height: 100%;. 8. padding-top: 80px;. Bootstrap sizing is a utility which allows you to adjust elements width or height. There are 4 available values: 25%, 50%, 75% and 100%.

I realize this is an older question, but none of the answers completely worked for me. The CSS that works is to set full height on the navbar-nav:

.navbar-nav {
     float: none!important;
     margin-top: 7.5px;
     height: 100vh;

Bootstrap navbar height - bootstrap helpers, 3. <p class="font-weight-bold">To change the height of the Navbar use CSS. <​nav class="navbar navbar-expand-lg navbar-dark primary-color">. 12. ​. 13. <! Today I would like to share a quick tip with you that you will find handy in case you need to change Bootstrap navbar height. There are more methods but I would like to tell you about these two: If you are working with CSS files then this is my preferred method. You won't be editing Bootstrap CSS files, neither the Bootstrap theme's CSS, but

Navbar · Bootstrap, Documentation and examples for Bootstrap's powerful, responsive navigation .​navbar-nav for a full-height and lightweight navigation (including support for  Questions: This is basically what I want to achieve: I want the total page to be 100% height, but when I put the sidebar and body at 100%, the page adds the 40px from the navbar, so I get a scrollbar even when there shouldn’t be one.

Sizing · Bootstrap, Width and height utilities are generated from the $sizes Sass map in #eee;">​Width 100%</div> <div class="w-auto p-3" style="background-color: #eee;">​Width  question I used this for example on my browser works fine it also responsive when you make the screen bigger o media screen size but when i open my app on mobile browser it just does not work the mobile menu any idea i'm using spring 4.2 and all my dependencies are include on my deployment assembly resources everything

How do I modify navbar height? - HTML & CSS, I've tried adjusting the height everywhere I could and nothing is working. .​dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; ethanforbes89 November 8, 2017, 6:32pm #3 In cases where you feel you really must use an actual height it's better to use min-height to stay responsive,  Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

  • Also don't forget to overwrite the max-height rule. Otherwise, this worked perfectly.
  • I'm using navbar-fixed-bottom with this and it gets 100% height, but hides the first few li items. Any ideas why?
  • Whenever I click the hamburger icon and navbar opens, for a moment I can see the navbar full screen (height wise) but it then suddenly goes back to default height (depending on the number of items in the navbar). I tried to set the height using js but the effect is the same.
  • this does not work where you have more menu items/links that can fit on one screen and you need a scroll. Giving .navbar-collapse 100vh won't let you see the last few links in your menu.
  • Only answer that worked for me using Bootstrap 4. Thanks a lot!