Creating a Bootstrap navbar collapse overlay menu

Question

I am trying to get an overlay menu when the user clicks on the burger menu it takes up the whole screen, Something like this :

I for some reason cant seem to get it to work at all , i have tried to use examples but it might be because i am not that experienced with bootstrap but it wont overlay the menu at all.

So i have set it up so the burger menu appears at 991px using media queries and it works fine but getting the overlay to pop up is not happening at all.

HTML:

  <nav class="navbar navbar-default navbar-fixed-top" id="section1">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
                        <span class="icon-bar"></span> <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        </button>
        <a class="navbar-brand"><img alt="" src="Images/logo.png" class="img-responsive"></a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#section1">Home</a>
          </li>
          <li>
            <a href="#section2">About Me</a>
          </li>
          <li>
            <a href="#section3">Game</a>
          </li>
          <li>
            <a href="#section4">Me</a>
          </li>
          <li>
            <a href="#section5">Hobbies</a>
          </li>
          <li>
            <a href="#section6">Contact Me</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <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">
        <ul>
          <li>Brand</li>
          <li>About Me</li>
          <li>Game</li>
          <li>Hobbies</li>
           <li>Contact Me</li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS:

@media only screen and (max-width: 991px) {
  .navbar-header {
    float: none;
  }
  .navbar-left, .navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-fixed-top {
    top: 0;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .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;
}
}

You can see the full code here : Fiddle Link

No idea why its not working but i am guessing its something to do with me not using bootstrap correctly ,

Thanks again for all the help

Answer 1

For that you need to use javascript ( or jQuery in my example ) .

First, you need an overlay. I created a div with class .overlay , fixed, full height and width with red background and opacity

Second, you need to position your menu . I positioned in center ( vertically and horizontally ). ( in below 991px media query )

Third, with a little bit of jQuery i made the effect you wanted. You can change/style the code as you please. But what i made for you should be more than enough to help you achieve exactly what you want

Fourth, here on Stack Overflow we don't make free code. We just help you make your code functional. You should try and research more on a subject before posting here for help

See jsFIddle or snippet below

 $(".navbar-toggle").on("click", function() { $(".overlay").fadeIn("slow") }) $(".overlay").on("click", function() { $(this).fadeOut(); $(".navbar-collapse").removeClass("in").addClass("collapse") })

 body { background-color: Black; } .navbar-default { background-color: transparent; border-top: 0px solid rgba(0, 0, 0, 0.5); border-bottom: 0px solid rgba(0, 0, 0, 0.5); border-left: 0px solid rgba(0, 0, 0, 0.5); border-right: 0px solid rgba(0, 0, 0, 0.5); -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; padding-top: 9px; padding-bottom: 26px; } .navbar.navbar-default .navbar-collapse { border: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-nav>li { border-right: 1px solid white; padding-left: 14px; padding-right: 14px; height: 32px; } .navbar-nav { padding-top: 20px; } .navbar-nav>li:last-child { border: none; } .navbar-default .navbar-toggle { border-color: rgba(0, 0, 0, 0); } .navbar-default .navbar-toggle .icon-bar { background-color: #fff; } .navbar-toggle { margin-top: 19px; margin-right: 43px; } .navbar-default .navbar-nav>li>a { color: white; font-size: 15px; line-height: 1px; } .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #fff; background-color: rgba(255, 198, 0, 0); -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } .navbar-default .navbar-nav>li>a { display: inline-block; position: relative; padding-bottom: 3px; } .navbar-default .navbar-nav>li>a:after { content: ''; display: block; margin: auto; height: 1px; width: 0px; background: transparent; transition: width .4s ease, background-color .4s ease; margin-top: 12px; } .navbar-default .navbar-nav>li>a:hover:after { width: 100%; background: #FFC600; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { color: #fff; background-color: rgba(255, 198, 0, 0); border-bottom: solid #FFC600; border-bottom-width: 1px; height: 29px; } @media only screen and (max-width: 991px) { .navbar-collapse { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } .overlay { position: fixed; width: 100%; height: 100%; background: red; opacity: 0.5; left: 0; top: 0; display: none; } .navbar-header { float: none; } .navbar-left, .navbar-right { float: none !important; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .navbar-fixed-top { top: 0; } .navbar-collapse.collapse { display: none!important; } .navbar-nav { float: none!important; margin-top: 7.5px; } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } .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; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <nav class="navbar navbar-default navbar-fixed-top" id="section1"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand"><img alt="" src="Images/logo.png" class="img-responsive"></a> </div> <div class="overlay"> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li> <a href="#section1">Home</a> </li> <li> <a href="#section2">About Me</a> </li> <li> <a href="#section3">Game</a> </li> <li> <a href="#section4">Me</a> </li> <li> <a href="#section5">Hobbies</a> </li> <li> <a href="#section6">Contact Me</a> </li> </ul> </div> </div> </nav> <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"> <ul> <li>Brand</li> <li>About Me</li> <li>Game</li> <li>Hobbies</li> <li>Contact Me</li> </ul> </div> </div> </div> </div>

Answer 2

I would suggest creating a modal and initiating it on a .on('click' function(){}) of the menu item. that way just the backdrop should be good enough to hide everything behind and the focus would be on the modal. If you are not to familiar with bootstrap easier solution would be to use the bootstrap.dialogue library. here is a link to some examples. Please let me know if you have any other questions.

https://nakupanda.github.io/bootstrap3-dialog/