<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="btn btn-link navbar-toggle collapsed" data-toggle="modal" data-target="#menuModal"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- <a class="navbar-brand" href="#">Michael Charles Criste</a> --> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a class="navbar-brand" href="#">Brand Name</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="row"> <hp>Content here.</hp> </div> <div class="modal fade fullscreen in" id="menuModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;"> <div class="modal-dialog"> <div class="modal-content" style="color:#fff;"> <div class="modal-header" style="border:0;"> <button type="button" class="close btn btn-link" data-dismiss="modal" aria-hidden="true"><i class="fa fa-close fa-lg" style="color:#999;"></i></button> <h4 class="modal-title text-center"><span class="sr-only">main navigation</span></h4> </div> <div class="modal-body text-center"> <ul style="list-style-type:none;"> <li><a href="#" class="big">Hello</a></li> <li><a href="#" class="big">A Menu Item</a></li> <li><a href="#" class="big">Another Item</a></li> <li><a href="#" class="big">This One Too!!</a></li> <li><a href="http://meagency.com" class="big">me.agency</a></li> </ul> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div> </div>

/* FULL SCREEN MODAL STYLES -------------------------------------------------- */ .navbar-header { float: none; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-collapse.collapse { display: none!important; } .navbar-nav { float: none!important; margin: 7.5px -15px; } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } .fullscreen .modal-dialog { margin: 0 0 0 0; width: 100%; height: 100%; min-height: 100%; padding: 0; color: #333; } .fullscreen .modal-content { height: 100%; min-height: 100%; border-radius: 0; color: #333; background: rgba(255, 255, 255, 0.97); } .fullscreen .modal-body ul { padding: 100px 0 0 0; overflow: auto; } .fullscreen .modal-body li { padding: 10px 0 10px 0 ; } .fullscreen .modal-body a { color: #333; font-size: 300%; } @media (max-width: 480px){ .fullscreen .modal-body ul { padding: 30px 0 0 0; overflow: auto; } .fullscreen .modal-body li { padding: 4px 0 4px 0 ; } .fullscreen .modal-body a { color: #333; font-size: 200%; text-transform: uppercase; font-weight: 700; } }