How to create a fully responsive Navigation Bar for your custom website or blogger website in 05 minutes?
How to
create a fully responsive Navigation Bar for your custom website or blogger
website in 05 minutes?
Create Responsive
Navigation Bar with HTML and CSS only.
How To Add Hover effects in your Navigation Bar with CSS ?
You can Create a full responsive navigation Bar with hover effects in 05 minutes with HTML and CSS only.
STEP 1.
Create a folder, now
create a text file , rename it and change its extension (from .txt to .html). Now it is an html file which can be opened in browser.
Now create another text
file and rename it as Style and change its extension (from .txt to .css).
If you want to use
logo , then create subfolder name it images , paste your image file in this
subfolder. No matter the format but remember you should know its extension e.g logo.png
or logo.jpeg etc.
STEP 2
Open VS Code , click Open New folder in VS
code , browse and select your folder and select it. It will be opened in your
VS Code.
STEP 3
Open your HTML
document and your file should look like this.
<!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">
<title>navigation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navigation-container">
<nav>
<img class='logo' src="images/Logo.png" alt="Home">
<ul>
<li>
<a href="#">News</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Blog</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
STEP 4
Open a new file and save it as style.css (CSS style Sheet) and your file should look like this.
.navigation-container img.logo {
height: 35px;
border-radius: 8px;
}
.navigation-container nav {
display: flex;
background: rgb(54, 38, 18);
width: 890px;
margin: 0 auto;
position: fixed;
top: 12px;
left: 0px;
right: 0px;
justify-content: space-between;
align-items: center;
font-family: sans-serif;
border-radius: 12px;
}
.navigation-container nav ul {
display: flex;
list-style: none;
padding: 0;
width: 85%;
}
.navigation-container nav ul li {
width: 100%;
}
.navigation-container nav a {
text-decoration: none;
color: blue;
font-weight: bold;
transition: all 400ms;
}
.navigation-container img.logo:hover {
height: 70px;
border-radius: 3px;
z-index: -2;
transform: translateX(50%);
}
.navigation-container nav a:hover {
background-color: aquamarine;
z-index: -2;
font-size: 20px;
color: crimson;
padding: 0 5px;
background-color: burlywood;
transform: rotateX(-90%);
border-radius: 20px;
}
STEP 5
Create a new Folder with the name IMAGES. Paste your logo here and name it LOGO.
Watch video if you have any problem.