Creating a Bootstrap navbar collapse overlay menu

12,263

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>
Share:
12,263
RonTheOld
Author by

RonTheOld

Updated on December 03, 2022

Comments

  • RonTheOld
    RonTheOld 11 months

    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 :

    enter image description here

    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

    • RonTheOld
      RonTheOld about 6 years
      @SanchitPatiyal To recreate the screenshot i posted above when the user hits the bootstrap 3 burger menu
    • Mihai T
      Mihai T about 6 years
      and which element should be your overlay ? can't see it anywhere . see here an example w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay2
    • RonTheOld
      RonTheOld about 6 years
      @MihaiT i am trying to get it to work on the burger menu it self , but like i said i have no clue how to get it to work at all , i tried to use wc3 schools to help but dosen't seem to work
    • Mihai T
      Mihai T about 6 years
      i guess you want the nav ( menu items ) to cover the whole page ( width and height ) . The burger button is outside the nav. If you put the nav to cover the whole page, it will also be on top of the burger button so you won't be able to click again on it. That's why you need another button if you want to do that
    • RonTheOld
      RonTheOld about 6 years
      If you see this example i found : rometheme.net/muse/jonk You can see when the menu gets small it turns into the burger menu and when you click it, it overlays the whole screen, this is the effect i was trying to replicate but right now i have no idea
  • RonTheOld
    RonTheOld about 6 years
    Thank you for taking the time to do this, it will help tremendously towards my work, thank u again xx