Skip to content

How To Create a Full screen Overlay Navigation

full screen navigation thumbnail

Thanks for visiting my website. In this article, we will learn how to create a full screen overlay navigation using HTML and CSS.  Don’t worry this is very easy just a simple line of codes.

For that, we need to create an HTML file and add the following code.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Full Screen Navigation</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='http://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>    
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
   
    <label for="nav" class="nav-btn">
        <i class="fa fa-bars" aria-hidden="true"></i>
    </label>
    <input type="checkbox" id="nav">
    <ul class="nav-overlary">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Product</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

    We Done Thank you please subscribe my channel

</body>
</html>

In the above code, you notice we add font-awesome for the bar icon.

<label for="nav" class="nav-btn"> 
   <i class="fa fa-bars" aria-hidden="true"></i> 
</label> 
<input type="checkbox" id="nav">

As you checked in HTML we used checkbox. With this checkbox, we will implement overlay navigation. That magic we will do in the CSS.

Now we will create CSS file

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color:#fff;
    background: #000;
}

a{
    color:#fff;
    text-decoration: none;
}

.nav-btn{
    position: fixed;
    top:30px;
    right: 30px;
    cursor: pointer;
}

#nav{
    display: none;
}

.nav-overlary{
    position: absolute;
    display: inline-block;
    text-align: center;
    width: 100%;
    height: 100vh;
    padding: 40px;
    list-style: none;
    opacity: 0;
    transform: translateY(-100);
    transition: .5s;
    z-index: -1;
}

.nav-overlary li{
    font-size: 40px;
    text-transform: uppercase;
    padding:20px;
}

input[type="checkbox"]:checked ~ .nav-overlary{
    opacity: 1;
    transition: 1s;
}

In the above code, I made some code in bold which is doing everything. Just try on your browser and comment on your thoughts.

Here is the full video. Must watch and if you like my code subscribe to my YouTube developerdiary channel.

Find more article which will help you

  1. Set session in CodeIgniter
  2. WordPress vs Joomla
  3. How to install Gulp 4 with sample project
  4. How To Create a Full screen Overlay Navigation

You May Also Like

Tags: