Angel Angel - 1 year ago 87
CSS Question

Bootstrap - Make the menu expand to page height

I have the following JSFiddle code

<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-right">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="about.php">Profile</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
.navbar-collapse.collapsing {
clear: left;

[Using Bootstrap and in mobile mode]

I would like that when the menu be expanded, it cover all the page.

See the following image.

Any idea on how to achieve this?


Answer Source

Add height: 100vh !important; to your css in the, .navbar-collapse.collapsing class, .navbar-collapse.collapsing {
    clear: left;
} {
    height: 100vh !important;

Here is a fiddle: