Hello, welcome back my readers, I hope you all are doing well with our work. Now we are going to create something new and special that mostly uses on the website and is really important for the website. That's the Navigation Menu created by HTML and CSS only.
I have created some awesome navigation menus but this is the first one that I want to share and show you about it. The navigation Menu is shown at the top of the website and whenever we resize it on different devices, it also flexes and is responsive to follow those devices like Mobile phones, PC or computers or tablets...etc.
Let's have a look at the real example of creating this Navigation Menu Bar together with my video tutorial and source code below:
Navigation Bar in HTML, CSS | Video tutorial
To make it easy for you we give you the source code below
Logo image: https://drive.google.com/file/d/1lr49uL72TSt4J1d_UzinlCI2dT3bGoeI/view?usp=sharing
Starting HTML file
Basically, we will create a file name burgershop.html and paste this opening HTML block into the file
<!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>Burger shop</title>
<link rel="stylesheet" href="./burgershop.css">
</head>
<body>
<!-- code block -->
</body>
</html>HTML Markup
And then, we have to paste this HTML block including the header tag and section to the file above
<header>
<h2>
<a href="#">Food Services 🍻</a>
</h2>
<ul class="nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</header>
<section class="showcase">
<div class="showcase-img"></div>
<h1>Burger Spot!</h1>
<h3>We're always in the mood for food</h3>
<a href="#" class="btn">Order Now</a>
</section>CSS Markup
The last step is making the CSS file name burgershop.css and pasting the below code to the CSS file
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@1,700&family=Pacifico&family=Poppins&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
ul.nav{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
cursor: pointer;
color: #fff;
}
a:hover{
color: #ee2475;
transition: .5s;
}
section{
display: flex;
flex-direction: column;
align-items: center;
padding: 110px 100px;
}
@media (max-width: 1000px){
section{
padding: 100px 50px;
}
}
@media (max-width: 600px){
section{
padding: 125px 30px;
}
}
section p{
max-width: 800px;
text-align: center;
margin-bottom: 35px;
padding-block-end: 0 20px;
line-height: 2;
}
/* Header block */
header{
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 35px 100px 0;
}
header .nav{
display: flex;
}
header .nav li{
margin: 0 15px;
}
header .nav li:first-child{
margin-left: 0;
}
header .nav li:last-child{
margin-right: 0;
}
@media (max-width: 1000px){
header{
padding: 20px 50px;
}
}
@media (max-width: 700px){
header{
flex-direction: column;
}
header h2{
margin-bottom: 15px;
}
header .nav li{
margin: 0 7px;
}
}
.showcase{
position: relative;
justify-content: center;
min-height: 100vh;
color: #fff;
text-align: center;
}
.showcase .showcase-img{
background-image: url(./burger.jpg);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover no-repeat;
z-index: -1;
}
.showcase .showcase-img::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: .7;
}
h1{
margin-bottom: 15px;
font-size: 65px;
}
.showcase h3{
margin-bottom: 40px;
font-size: 25px;
}
.showcase a.btn{
padding: 15px 35px;
background: transparent;
border-radius: 50px;
text-transform: uppercase;
border: 3px solid darkgoldenrod;
}
@media (max-width: 800px){
/* .showcase{
min-height: 600px;
} */
.showcase h1{
font-size: 32px;
}
.showcase h3{
font-size: 20px;
}
.showcase a.btn{
padding: 15px 50px;
}
.showcase .showcase-img{
background-size: cover;
}
}Ok, you done
