How to Make Responsive Navigation Menu Bar Using HTML and CSS

Learn How To Make Responsive Navigation Menu Bar Only Using HTML and CSS. Easy Way To Make Navigation Menu Bar Using HTML CSS. Easy Way To Learn HTML For Beginners.

How to Make Responsive Navigation Menu Bar Using HTML and CSS

0.0 - 0.45 min : Intro
0.45 - 19.0 min: Create Responsive Navigation Menu Bar Using HTML and CSS.

Basic HTML Code

This is the basic HTML which is important for all HTML files. I import Poppins in this HTML file using Styling from google because most people do not have Poppins font on their devices.



<html>
<head>
<meta charset="utf-8">
<meta content="IE-edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, intial-scale=1.0" name="viewport">
<!--poppins-font----------->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!--using-font-awesome-------------->
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
<title>Navigation Bar</title>
	<!--style----->
	<style>
		body{
			font-family:poppins;
		}
	</style>
	
</head>

<body>
</body>
</html>

Navigation Bar

You can easily make this awesome transparent gradient Menu/Navigation Bar on your website by watching my youtube video tutorial which I gave at the start of this post or by copy HTML and CSS code which I give below. Paste this HTML and CSS code into your HTML and CSS file. On the youtube video tutorial, I tell you all the important points which help you to make the navigation bar like that for your website. So I recommended you watch the Menu bar video Tutorial on how can I make this gradient menu bar only using HTML and CSS. I make this menu bar only using HTML and CSS without using jQuery or JavaScript. This navigation bar is fully responsive and all browsers compatible. HTML and CSS code I have given below this code help you to better understand my menu bar video tutorial on how I make this menu bar. I also provide you the source code, you can download and use this on your website without any copyright.

➤Navigation Bar HTML Code have given below.


  <!--navigation-------------------->
    <nav class="navigation">
        <!--logo------------>
        <a href="#" class="logo">
            <img src="images/logo.png"/>
        </a>
        <!--menu-btn------->
        <input type="checkbox" class="menu-btn" id="menu-btn">
        <label for="menu-btn" class="menu-icon">
            <span class="nav-icon"></span>
        </label>
        <!--menu------------->
        <ul class="menu">
            <li><a href="#">Using Play</a></li>
            <li><a href="#">Feature</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">FAQ</a></li>
        </ul>
        <!--sign-up-btn----->
        <a href="#" class="sign-up-btn">
            Beta Sign Up
            <!--icon-->
            <i class="fas fa-chevron-right"></i>
        </a>



        <!--nav-2------------------>
        <nav class="nav-2">
            <!--menu------->
            <ul class="menu-2">
                <li><a href="#">Using Play</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Careers</a></li>
                <li><a href="#">FAQ</a></li>
            </ul>
            <!--sign-up-btn-2--->
        
        <a href="#" class="sign-up-btn-2">
            Beta Sign Up
            <!--icon-->
            <i class="fas fa-chevron-right"></i>
        </a>
        </nav>
    </nav>

This is the Stylesheet code that I use in my project. First, you make a CSS file and link it with your HTML file, and then past this CSS code in your CSS file for styling the HTML code of the navigation bar.

➤Navigation Bar CSS Code is have given below.

body{
    margin: 0px;
    padding: 0px;
    background-color: #111111;
    width:100%;
    height: 100vh;
    background-image: url(../images/bg.png);
    background-position:top center;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: poppins;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
*{
    box-sizing: border-box;
}
.navigation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background-image: linear-gradient(180deg, #000 15%, transparent);
}
.logo{
    height: 24px;
    z-index: 2;
}
.logo img{
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.menu{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
}
.menu li{
    padding: 20px;
}
.menu li a{
    color: #ffffffcc;
}
.sign-up-btn,
.sign-up-btn-2{
    color: #17ffa6;
}
.sign-up-btn i,
.sign-up-btn-2 i{
    margin-left: 4px;
}
.menu li a:hover,
.menu-2 li a:hover{
    color: #17ffa6;
    transition: all ease 0.5s;
}
.sign-up-btn:hover,
.sign-up-btn-2:hover{
    color: #0ab372;
    transition: all ease 0.5s;
}
::selection{
    color: #121212;
    background-color: #17ffa6;
}
.nav-2,
.menu-icon,
.menu-btn{
    display: none;
}
@media(max-width:1000px){
    .navigation{
        padding: 30px;
    }
    .navigation .menu,
    .navigation .sign-up-btn{
        display: none;
    }
    .menu-icon{
        display: block;
    }
    nav .menu-icon{
        cursor: pointer;
        float: right;
        padding: 5px;
        position: relative;
        user-select: none;
        z-index: 2;
    }
    nav .menu-icon .nav-icon{
        background-color: #ffffffcc;
        display: block;
        height: 2px;
        position: relative;
        transition: background 0.2s ease-out;
        width: 25px;
    }
    nav .menu-icon .nav-icon:before,
    nav .menu-icon .nav-icon:after{
        background-color: #ffffffcc;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        transition: all ease-out 0.2s;
        width: 100%;
    }
    nav .menu-icon .nav-icon:before{
        top: 5px;
    }
    nav .menu-icon .nav-icon:after{
        top: -5px;
    }
    nav .menu-icon .nav-icon,
    nav .menu-icon:checked ~ .menu-icon .nav-icon{
        background-color: transparent;
    }
    nav .menu-btn:checked ~ .menu-icon .nav-icon:before{
        transform: rotate(-45deg);
        top: 0px;
    }
    nav .menu-btn:checked ~ .menu-icon .nav-icon:after{
        transform: rotate(45deg);
        top: 0px;
    }
    nav .menu-btn{
        display: none;
    }
    .nav-2{
        display: block;
        position: fixed;
        left: 0px;
        top: 0px;
        width:100%;
        height: 100%;
        background-color: #000000;
        flex-direction: column;
        justify-content: center;
        padding-left: 40px;
        z-index: 1;
        display: none;
        animation: fade 0.3s;

    }
    .menu-2{
        margin: 0px;
        padding: 0px;
    }
    .menu-2 li a{
        color: #ffffff;
        margin: 0px;
        padding: 20px 0px;
        font-size: 45px;
    }
    .sign-up-btn-2{
        font-size: 24px;
    }
    .sign-up-btn-2 i{
        font-size: 14px;
    }
    nav .menu-btn:checked ~ .nav-2{
        display: flex;
    }

}
@keyframes fade{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

The Download Links Will Be Shown in 30 Seconds

How To Dowload Files

How to Make Responsive Navigation Menu Bar Using HTML and CSS

How to Make Responsive Navigation Menu Bar Using HTML and CSS

Comments

Followers

Search This Blog

Labels

Popular Posts

Archive

Labels

Contact Form