Creating Hamburger menu and applying Overlay effect.

I make use of the bootstrap framework to design a career website, and I will like to share two things from the design. Creating hamburger menu with a drop-down menu and creating background-image with an overlay effect:

For my design, I created a hamburger menu with a drop-down menu that has clickable links like home, about, skills, e.t.c and it goes with the page anytime the website page is scrolled down the page.
The snippet below shows how to achieve it using HTML and CSS language.

HTML code:
 
 <div id="hamburg>
<a href=”#” type=”button” class=”dropdown-toggle” data-toggle=”dropdown”>
  <span class=”fa fa-bars” arial-hidden=”true”></span>
  </a>
  <p>MENU</p>
  <ul class=”dropdown-menu”>
  <li class=”text-right”>
  <a href=”#”>&times</a>
  </li>
  <li id=”home”>
  <a href=”#” class=”item-active”><span class=”fa fa-home”> &nbspHome</span></a>
  </li>
  <li id=”About”>
  <a href=”#”><span class=”fa fa-home”> &nbspAbout</span></a>
  </li>
  <li id=”Skills”>
  <a href=”#”><span class=”fa fa-info”> &nbspSkills</span></a>
  </li>
  </ul>
  </div
CSS Styling:
#hamburg{
margin-right:0;
 margin-left: 0;
 background-color: #eee048;
 min-height: 60px;
 padding-left: 15px;
 padding-top: 2px;
 font: 24px bold sans-serif;
 border-bottom: 1px solid #146eb4;
 }
#hamburg p{
 font: 20px solid sans-serif;
 padding-left: 17px; 
 }
.fa-bars{
 position: fixed;
 }
ul.dropdown-menu{
 top: 0;
 left: 0;
 background-color: #0d6bb5 !important;
 width: 300px;
 height: 800px;
 border: 0;
 margin: 0;
 position: fixed;
 }
ul.dropdown-menu a{
 color: #eee048;
 padding-left: 60px;
 height: 50px;
 font-family: sans-serif;
 font-size: 20px;
 }
ul.dropdown-menu a:hover,
 ul.dropdown-menu a:active{
 background-color: blue;
 color: white;
 }

Creating background-image with overlay effect:Overlay is a transparent covering that is applied to background image.Below is the HTML and CSS code that was used to achieve the effect.

HTML code:
<div id=”element-with-background-image”>
 <div class=”img-responsive” id=”color-overlay”>
 <div id=”technical”>
 <h3>TECHNICAL SKILLS</h3>
 <div class=”container-fluid”>
 <div class=”row”>
 <div class=”col-md-3">
 <h2>120</h2>
 <img src=”images/line.jpg” alt=”line” class=”img-responsive”>
 <h5>PROJECTS DONE</h5>
 </div>
 <div class=”col-md-3">
 <h2>172</h2>
 <img src=”images/line.jpg” alt=”line” class=”img-responsive”>
 <h5>NEW COMPANIES</h5>
 </div>
 <div class=”col-md-3">
 <h2>102</h2>
 <img src=”images/line.jpg” alt=”line” class=”img-responsive”>
 <h5>WEB DESIGNS</h5>
 </div>
 <div class=”col-md-3">
 <h2>156</h2>
 <img src=”images/line.jpg” alt=”line” class=”img-responsive”>
 <h5>HAPPY CLIENTS</h5>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
CSS Styling:
#element-with-background-image{
 position: relative;
 background-image: url(images/cap11.png);
 margin-top: 35px;
 background-attachment: fixed;
 background-position: center;
 background-size: cover;
 background-color: transparent;
 min-height: 400px;
 }
#color-overlay{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: black;
 opacity: 0.6;
 }
#technical h3{
 text-align: center;
 font-size: 40px;
 color: #ffffff;
 padding-top: 30px; 
 text-decoration: underline;
 text-decoration-style: dotted;
 }
#technical h2{
 font-family: calibri;
 font-size: 60px;
 color: #ffffff;
 text-align: center;
 padding-top: 40px;
 }
#technical img{
 padding-left: 80px;
 }
#technical h5{
 font-size: 16px;
 color: #eeeeee;
 letter-spacing: 1px;
 font-family: sans-serif;
 padding-left: 60px;
 }

background-image with overlay effect.