Creating a responsive navigation bar is a crucial aspect of building a website, as it allows users to easily navigate through the site and access its content. In this article, we will discuss how to create a responsive navigation bar using HTML and CSS.
To begin, you will need to have a basic understanding of HTML and CSS. HTML is used to structure the content of a webpage, while CSS is used to style and lay out the content.
The first step in creating a responsive navigation bar is to set up the HTML structure. This can be done by using a div element to wrap the navigation links. Inside the div, you can use an unordered list (ul) to hold the individual links. Each list item (li) will represent a single navigation link.
Next, you will need to style the navigation bar using CSS. You can use the CSS “display” property to set the navigation bar to be displayed as a flexbox. This will allow the navigation links to be evenly distributed across the width of the bar.
To make the navigation bar responsive, you will need to use media queries. Media queries allow you to apply specific styles based on the width of the viewport. For example, you can use a media query to change the layout of the navigation bar when the viewport is below a certain width.
To make the navigation links collapse into a dropdown menu on smaller screens, you can use the CSS “display” property and set it to “none” for the ul element when the viewport is below a certain width. You can then use a button element to toggle the display of the ul element on and off when the screen size is below the threshold.
Video Tutorial Of How To Create Responsive Navigation Bar Using HTML & CSS
In the video tutorial, “How to Create Responsive Navigation Bar using HTML and CSS,” you have seen the steps to create a responsive navigation bar. If you are feeling bored watching the tutorial, you can find the code below to copy or download.
To create a responsive navigation bar, you will need to create two files: an HTML file and a CSS file. After creating these files, paste the following codes into them.
First, create an HTML document called “index.html” and paste the provided code into it. Remember to save the file with the “.html” extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Responsive Animated Navigation Bar Design using Html CSS & JS</title>
<!-- Created by S-Tech04 -->
</head>
<body>
<header>
<a href="#" class="logo">Logo</a>
<div class="toggle" onclick="menuToggle()"></div>
<ul class="navigation">
<li><a href="#" style="--i:1">Home</a></li>
<li><a href="#" style="--i:2">About</a></li>
<li><a href="#" style="--i:3">Portfolio</a></li>
<li><a href="#" style="--i:4">Contact</a></li>
<li><a href="#" style="--i:5">More</a></li>
</ul>
</header>
<script>
function menuToggle(){
const toggle = document.querySelector('.toggle');
const navigation = document.querySelector('.navigation');
toggle.classList.toggle('active');
navigation.classList.toggle('active');
}
</script>
</body>
</html>
Second, make a CSS record with the name of style.css and glue the given codes in your CSS document. Keep in mind, you’ve to make a record with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;700;900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
height: 100vh;
background: url(./images/bg.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow-x: hidden;
}
header
{
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}
.logo
{
position: relative;
font-size: 28px;
color: #111;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
animation: slideLeft 0.5s linear forwards;
opacity: 0;
}
.toggle
{
position: relative;
height: 30px;
width: 30px;
background: url(./images/menu.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
z-index: 1000;
animation: slideRight 0.5s linear forwards;
opacity: 0;
}
.toggle.active
{
background: url(./images/close.png);
background-position: center;
background-repeat: no-repeat;
background-size: 30px;
}
.navigation
{
position: absolute;
display: flex;
right: 150px;
opacity: 0;
visibility: hidden;
transition: 0.5s;
}
.navigation.active
{
opacity: 1;
visibility: visible;
}
.navigation li
{
list-style: none;
}
.navigation li a
{
display: inline-block;
text-decoration: none;
margin: 0px 20px;
color: #111;
font-size: 16px;
font-weight: 600;
opacity: 0;
}
.navigation.active li a
{
animation: slideRight 0.5s forwards;
animation-delay: calc(var(--i) * 0.2s);
}
/* now i'll add animation on this page */
@keyframes slideRight
{
0%
{
transform: translateX(150px);
opacity: 0;
}
100%
{
transform: translateX(0px);
opacity: 1;
}
}
@keyframes slideLeft
{
0%
{
transform: translateX(-150px);
opacity: 0;
}
100%
{
transform: translateX(0px);
opacity: 1;
}
}
/* now i'll make it responsive */
@media(max-width: 991px){
header
{
padding: 20px 40px;
height: 75px;
}
.navigation
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.navigation.active li a
{
display: inline-block;
margin: 10px 20px;
font-size: 20px;
color: #111;
}
}
You have now completed the process of creating a responsive navigation bar using HTML and CSS. If you encountered any issues or errors while writing the code, you can download the source code files by clicking on the provided download button. The files are free and come in a .zip file that you will need to extract. Click the download button below to access the source code files.
