CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Angel
Angel

Reputation: 43

Bootstrap - Make the menu expand to page height

I have the following JSFiddle code

https://jsfiddle.net/mwcf086c/

.navbar-collapse.in,
.navbar-collapse.collapsing {
  clear: left;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
</div>

[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

Upvotes: 2

Views: 1657

Answers (1)

NosNits
NosNits

Reputation: 102

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/

Upvotes: 3

Related Questions