Angel Angel - 2 months ago 12
CSS Question

Bootstrap - Make the menu expand to page height

I have the following JSFiddle code

https://jsfiddle.net/mwcf086c/

<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>
</button>
</div>
<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>
</ul>
</div>
</div>




.navbar-collapse.in,
.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?

Thanks

Answer

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

.navbar-collapse.in, .navbar-collapse.collapsing {
    clear: left;
}
.navbar-collapse.in {
    height: 100vh !important;
}

Here is a fiddle: https://jsfiddle.net/L2fqzswk/1/

Comments