Bootstrap 4 - Fullscreen mobile navbar

Question

I\'m trying to figure out how I can do a fullscreen menu (navbar) on mobile size, with this I mean that when you press on the \'hamburger-menu\' the navbar (with the items)

Answer 1

I looked at the Bootstrap JS file and I find out that to achieve this effect you just need to change a few lines, to be more specific, where it's defined the 'Collapse' function (more or less at the 1100th line). The changes are:

Object.defineProperty(this._element, 'scrollHeight', {
      writable: true,
      value: $(window).height()-$(".navbar").outerHeight()
});

Placed after the assignment state of the this._element variable. With this we are defining the maximum size of the '.navbar-collapse' div, and that's why we are also subtract $(".navbar").outerHeight() value (the value it's referred at the initial moment, so when the menu still hidden, so with this we subtract the .navbar-brand div's height and the eventual parent's padding/margin).

We need to do in this way, because the 'scrollHeight' property (and also the others) isn't modifiable by default so we need to specify it.

The last change is to remove the line

_this._element.style[dimension] = '';

We do so, because otherwise when the element has the 'show' attribute (it has finished the animation) it won't occupy all the screen, basically since this line remove our custom height.

With these few changes we achieve the wanted result, the only cons of this solution is that we lose the capability of using the CDN for this file, because we need to download it and change it.

To be clear, this should be the file after the changes:

 ...
 var Collapse = function () {
  function Collapse(element, config) {
    ...
    this._element = element;
    //CHANGE (1)
    Object.defineProperty(this._element, 'scrollHeight', {
      writable: true,
      value: $(window).height()-$(".navbar").outerHeight()
    });
    this._config = this._getConfig(config);
    ...
  }
  ...
  _proto.show = function show() {
    var complete = function complete() {
      ...
      /* CHANGE (2) - Remove
      _this._element.style[dimension] = ''; */

      ...
    };
  };
  ...
 }
 ...

Answer 2

In your code you have done some impressive amount of work. I haven't gone through the whole code, instead I just added the following css:

.navbar-nav {
  height: 100vh !important;
}

This will work on any bootstrap 4 project as Bootstrap 4 stands today. Below is a pic of sample code with the highlighted class that I have modified, doing the same should work for most people and give the smooth transition from bootstrap without wanting to use JS or modify anything major.

Hope it helps everyone.