Fullscreen Overlay Responsive Navigation Menu Using HTML & CSS

 In this article, I am going to show you how to create a full-screen navigation menu bar. You can create a full-page menu bar using only HTML and CSS code. Earlier I have created many types of navigation menus such as site menu bar, top menu bar, responsive menu bar, etc.

Full-screen navigation is a kind of menu design where you can arrange the topics in your website or blog neatly. So that your user can easily find the topics. In most cases, the top menu bar can be noticed in most websites which is the most popular. But in some cases, this type of full skin menu bar is used which can be made very easily and simply. 

In this case, there is a button on the homepage, which when clicked, the menu bar can be seen across the entire page. Hope you like this design.

See the Pen fullpage menu 1 by Foolish Developer (@fghty) on CodePen.

Hopefully looking at the design above you like this Full-screen Overlay Responsive Navigation menu. If you want to make it and want to know how I made this design then you can follow the tutorial below.


Below you can watch the video tutorial to know the complete step-by-step. Here you can find out which programming code has been used to create which element.

Step 1: Create the basic structure of this menu bar

First of all, you have to create an HTML file and copy and paste the programming code below into the body section of that HTML file. In the following structure, I have given complete information on how you can add other codes. 

Basically, I designed the background of this menu using the CSS code below and added the necessary images to the homepage. Of course, you can't add images if you want, you can use any other color instead.

  <div id="myNav" class="overlay">

<!--Menu item & Close Button-->

  </div>

  <!--overlay Open button-->

  <div class="myPage">

  <!--Home page information -->

  </div>

body{

  margin: 0;

  padding: 0;

}

.myPage{

  width: 100%;

  height: 720px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  background-size: cover;

  background-image: url("https://wallpaperaccess.com/full/1137346.jpg");

  background-position: center;

  background-repeat: no-repeat;

  font-family: 'open sans';

}

 

/* overlay (background) */

.overlay{

  height: 0%;

  width: 100%;

background-color: rgb(51,51,51);

  background-color: rgba(0,0,0,0.9);

  overflow-y: hidden;

  transform: 0.5s;

  position: fixed;

  z-index: 9999999;

  left: 0;

  top: 0;

  

} 

Step 2: Add menu items and cancel buttons

The following CSS and HTML codes are used to add the required menus to the menu bar and to create a cancel button. The following CSS programming code has helped to design menu buttons and other menu links.

        <!--overlay close button-->

        <a href="#" class="closebtn" onclick="closeNav()">&times;</a>

        <!--overlay content -->

        <div class="overlay-content">

            <ul>

                <li><a href="#">Home</a></li>

                <li><a href="#">About</a></li>

                <li><a href="#">Services</a></li>

                <li><a href="#">Blog</a></li>

                <li><a href="#">Portfolio</a></li>

                <li><a href="#">Contact</a></li>

            </ul>

        </div>

/* Close Button */

.closebtn{

  color: rgb(255,255,255);

  text-decoration: none;

  font-weight: bold;

  position: absolute;

  top: 30px;

  right: 30px;

  font-size: 60px;

}

/* Position the content inside the overlay */

.overlay-content{

  position: relative;

  width: 100%;

  text-align: center;

  margin-top: 30px;

  top: 15%;

  margin: 20px;

}

.overlay-content li{

  margin: 7px;

  padding: 10px;

}

.overlay-content li a{

  color: #fff;

  margin: 30px;

  font-weight: bold;

  text-decoration: none;

  font-size: 30px;

  font-family: sans-serif;

}

Step 3: Add hover color effects to menu items

If you watch the demo, you will understand that in this case, I have used some amount of animation in the menu link. When you click on that link, an animation can be noticed in the background. The following CSS programming code has helped to design this effect.

/* Menu Hover Effect */

.overlay-content a:hover,

.overlay-content a:focus{

  padding-left: 30px;

  padding-right: 30px;

  padding-top: 10px;

  padding-bottom: 10px;

  border-radius: 20px;

  color: rgb(255,255,255) !important;

  background: rgb(236,51,181);

  transition: all 0.5s ease-in-out;

  -webkit-transition: all 0.5s ease-in-out;

  transform: translateX(-98%) translateY(-25%) rotate(45deg);

  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);

}

Step 4: Create a menu button on the home page

As I said before there is normally only one menu button in this menu bar and the whole menu bar is hidden. When you click on that menu bar, the full menu will appear. The following HTML and CSS programming codes have been used to create and design the button on the homepage. Height: 40px and width: 40px have been used for this button.

    <!--overlay Open button-->

    <div class="navMenu" onclick="openNav()">&#9776; </div>

/* Nav button */

.navMenu{

  top: 30px;

  right: 30px;

  font-size: 50px;

  font-weight: 500;

  position: absolute;

  width: 40px;

  height: 40px;

  cursor: pointer;

}

If you want to know better, follow the video tutorial above. Hopefully from this tutorial, you have learned how to create menus on this overlay using HTML and CSS programming code. You must comment on how you like this design.