Bootstrap Navbar Collapse Overlay Menu

A simple way to create an overlay with the Bootstrap Functions. This is a very simple script overlay for Bootstrap Modal.

While using Bootstrap i always liked the Overlay Menu for small menu options. This is a data-toggle sample menu that i found useful in StackOverflow.

The CSS:

.navbar-toggle {
  float: left !important;
  margin-left: 15px;
  margin-right: 0;

.modal-nav-content {
  width: 100%;
  height: auto;

.modal-nav-body {
  margin-top: 100px; 

.modal-nav-body ul {
  list-style-type: none;
  color: white;
  margin: 0;
  padding: 0;
  width: 100%;

.modal-nav-body ul li {
  text-align: center;
  font-size: 130%;
  padding: 8px;
  text-transform: uppercase;


<link href="" rel="stylesheet"/>
<script src=""></script>
<script src=""></script>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="modal" data-target="#nav-modal" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>


<!-- Modal -->
<div class="modal fade" id="nav-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-nav-content">
      <div class="modal-nav-body">

StackOverflow Link: