Bootstrap 4 - Fullscreen Mobile Navbar

Bootstrap 4 - Fullscreen mobile navbar

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] = ''; */

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

How to style fullscreen menu under default bootstrap toggler?

https://i.imgur.com/Nunc77r.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.imgur.com/Nunc77r.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;

  }

} 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">

  <a class="navbar-brand" href="#">Fixed navbar</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarCollapse">

    <ul class="navbar-nav mr-auto">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Link</a>

      </li>

      <li class="nav-item">

        <a class="nav-link disabled" href="#">Disabled</a>

      </li>

    </ul>

  </div>

</nav>

<main role="main" class="container">

  <div class="jumbotron">

    <h1>Navbar example</h1>

    <p class="lead">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.</p>

    <a class="btn btn-lg btn-primary" href="/docs/4.2/components/navbar/" role="button">View navbar docs »</a>

  </div>

</main>

bootstrap full screen menu on all devices

First you need to remove all the fixed max-heights for the .navbar-collapse, you have set it to 340px, and then set the height on the navigation to 100vh

.navbar-collapse {
    height: 100vh;
}

This will set the height of the navbar to entire viewport height.

Second, for the button try using a font icon (ie. fontawesome) and target the button state class of .collapsed to add a different icon.

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
    <i class="icon fa fa-bars"></i>
</button>

And then replace the bars icon with the X to close

.navbar-toggle.collapsed .icon:before {
    content: '\f00d';
}

If you want to stay with default bootstrap bars, and animate them into an X, you can take a look at this fiddle https://jsfiddle.net/gndkmc5y/

All you have to do is to set the top, middle and bottom classes to the bars.

bootstrap 4 navbar display mobile version for Tablet

That is controlled via the navbar-expand-* class whereby the * is the desired breakpoint from which onwards the navbar should stay expanded.

So, if you want to lower that breakpoint to say medium screens or small screens, you'd have to use navbar-expand-md or navbar-expand-sm respectively (instead of navbar-expand-lg).

In the following example, the navbar-expand-md class is used: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-light bg-light">

  <a class="navbar-brand" href="#">Navbar</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav mr-auto">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Link</a>

      </li>

      <li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

          Dropdown

        </a>

        <div class="dropdown-menu" aria-labelledby="navbarDropdown">

          <a class="dropdown-item" href="#">Action</a>

          <a class="dropdown-item" href="#">Another action</a>

          <div class="dropdown-divider"></div>

          <a class="dropdown-item" href="#">Something else here</a>

        </div>

      </li>

      <li class="nav-item">

        <a class="nav-link disabled" href="#">Disabled</a>

      </li>

    </ul>

    <form class="form-inline my-2 my-lg-0">

      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

    </form>

  </div>

</nav>

Bootstrap navbar does works when in full screen but not when condensed

Well, I am not sure if I understand the question pretty well,
but from what I understand I would move the login, register, and logoff into a div and apply a media query in the CSS to do what you ask for.

<style>
 @media only screen and (max-width: 990px) {
   .chnageMeWhenSmall {
    position: absolute;
    right: 60px;
    }
  }
</style>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="{{ url_for('home')}}">Test</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" href="#">Pricing</a>
    </li>
  </ul>
     <div class="chnageMeWhenSmall">
    {% if current_user.is_authenticated %}
        <span class="navbar-text mb-2 mb-lg-0">
            <a href="{{ url_for('logout')}}" class="me-4">Logout</a>
        </span>
    {% else%}
        <span class="navbar-text mb-2 mb-lg-0">
            <a href="{{ url_for('login')}}" class="me-4">Login</a>
        </span>
        <span class="navbar-text mb-2 mb-lg-0">
            <a href="{{ url_for('register')}}" class="me-4">Register</a>
        </span>
    {% endif %}
     </div>
    </div>
  </div>
</nav>

How do I make collapsed Bootstrap Navbar open to full screen height smoothly?

The sudden jump is because you are adding the height to the collapse class that isn't present until the last moment of the animation. Instead try to give the height to a custom class or one that you have already applied like nav-bar.

Bootstrap 4: Full width collapsible navbar with different color to main navbar

To get this, don't use the default bg-light class - it applies !important which we want to avoid...

We can get this using a simple media query for this?

working snippet:

nav {

  background-color: lightpink

}

@media screen and (max-width:595px) {

  nav {

    background-color: lightgreen

  }

}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<nav class="navbar  navbar-light floating navbar-expand-sm cm-navbar" id="mj-topbar">

  <div class="container">

    <a class="navbar-brand nb-brand" href="/index.php">My Brand</a>

    <button type="button" class="navbar-toggler nb-hamburger-button" data-toggle="collapse" data-target="#collapseCoreNav" aria-controls="collapseCoreNav" aria-expanded="true" aria-label="Toggle Navigation">

    <span class="navbar-toggler-icon"></span></button>

    <div class="navbar-collapse collapse show" id="collapseCoreNav">

      <ul class="navbar-nav ml-auto">

        <li class="nav-item">

          <a class="btn_ tdbLink fa-angle-right_ nav-link" href="/">Home</a>

        </li>

        <li class="nav-item">

          <a class="btn_ tdbLink fa-angle-right_ nav-link" href="/login.php">Login</a>

        </li>

      </ul>

    </div>

  </div>

</nav>

<s

Bootstrap 4 dropdown with full width in Mobile

Option 1 the dropdown is contained in the col-10. You could use col-md-10 instead so that the containing col is full-width on mobile? (no extra CSS changes)

<div class="container">
  <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-10">
      <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </div>
    </div>
    <div class="col-2"></div>
  </div>
</div>

https://jsfiddle.net/3jq0ozfs/

Option 2 is to position:static the containers (dropdown & col-10). This will keep the col-2 and col-10 the same. (no extra CSS changes)

  <div class="row">
    <div class="col-2"></div>
    <div class="col-10 position-static">
      <div class="dropdown position-static">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
        <div class="dropdown-menu ml-1">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </div>
    </div>
    <div class="col-2"></div>
  </div>

https://jsfiddle.net/xsv1d6u5/1/


Related Topics

Add Title Attribute from CSS

Why Does Width Apply to a Button with Display Inline

Html.Imagegetter

How to Make Last Cell of a Row in a Table Occupy All Remaining Width

How to Overwrite CSS Style

How to Make Responsive Website for All Devices

If an HTML Form Has Two <Input Type="Submit"> Buttons, How to Know Which Got Clicked

Why Is "​" Being Injected into My HTML

How to Use the Same Meta Tag for Opengraph and Schema.Org

Any Way of Using Frames in HTML5

100% Width Minus Margin and Padding

Flexbox with Fixed Header and Footer and Scrollable Content

How to Move an Element That's on the Top to the Bottom in Responsive Design

Text-Align: Right; Only for Placeholder

How to Make an Input Element Occupy All Remaining Horizontal Space

Set Maxlength in HTML Textarea

Apply CSS Style on All Elements Except with a Specific Id

Responsive 2-Column CSS Layout Including Sidebar with Fixed Width


Leave a reply



Submit