How To Create A Responsive Header Using HTML & CSS
Codewithrandom Blogs
Posted on May 22, 2023
Dear Coders! We'll learn how to make a Responsive Header with HTML and CSS in this article. In this project for beginners, you will build a Responsive Header that you may utilize in future tasks, such as building an e-commerce website.
You can add the header section to your project using this header. From the very beginning, we will go over this project step-by-step. Following this Code to create a Responsive Header.
We're going to use this as our header. You probably want to know how we used HTML and CSS to create this header. We'll do our best to use the least amount of code possible to achieve our desired header because, as I've already said, this project is beginner-friendly. For you to see how our header will appear when we add it to our content, we've also included an image as a background.
Step1: Adding Some Basic HTML
HTML stands for HyperText Markup Language. This is a markup language. Its main job is to give our project structure. We will provide our project structure by utilising this markup language. So let's look at our HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<input type="checkbox" id="nav-toggle">
<div class="logo">MINZ<strong>CODE</strong></div>
<ul class="links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
<div class="container">
<img src="https://picsum.photos/id/559/1000/1000.jpg" alt="">
<img src="https://picsum.photos/id/558/1000/1000.jpg" alt="">
</div>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</body>
</html>
We'll start by making a fresh HTML file. In order to switch between multiple font styles, we will add links to both the external CSS file and the Google font inside the head section.
Now, utilising tag, we will build the header or navbar of any webpage.
We'll now add a div element with a logo within the nav tag, and we'll utilise the unorder list to add the different menu items to our navbar.
To link to a different part using a menu item, we have put the anchor element inside the list item.
We will now add the label for our navbar toggle using the label tag, which we will use later on to give our navbar responsiveness using CSS.
To help the user understand the reference to the header, we've put two images inside the container.
Now let's a look at our structure
Step2: Adding CSS
body {
padding: 0;
margin: 0;
}
.container {
position: relative;
margin-top: 100px;
}
.container img {
display: block;
width: 100%;
}
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
font-family: "Montserrat", "sans-serif";
height: 100px;
background-color: #3e65da;
padding: 0 5%;
}
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
}
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
nav .links li {
list-style: none;
}
nav .links a {
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
position: relative;
}
nav .links a:hover {
color: white;
}
nav .links a::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
nav .links a:hover::before {
visibility: visible;
transform: scaleX(1);
color: white;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
transition: all 0.5s ease-in-out;
}
@media screen and (max-width: 768px) {
nav .logo {
float: none;
width: auto;
justify-content: center;
}
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0, 0, 0, 0.8);
overflow: hidden;
transition: all 0.5s ease-in-out;
}
nav .links a {
font-size: 20px;
}
nav :checked ~ .links {
bottom: 0;
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}
To add Navbar style , we'll utilise some simple CSS code. It will be simple for you to understand and attempt to incorporate your style, which will assist you clarify your concepts. The CSS will be explained step by step.
Step1: We'll set the margin and padding on our webpage to "zero" using the body tag.
We will style our image using the class selector (.container). We add a top margin of "100px" to our image. Our image's width is set to 100%, and its display is set to "block".
body {
padding: 0;
margin: 0;
}
.container {
position: relative;
margin-top: 100px;
}
.container img {
display: block;
width: 100%;
}
Step2: We will now customise our navbar by utilising the tag selector (nav). In order to make it appear closer to the window, we fixed the position to the webpage and increased the z-index to 10. The "Montesirat" font family was selected. The height was set to "100px" with "blue" as the background colour.
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
font-family: "Montserrat", "sans-serif";
height: 100px;
background-color: #3e65da;
padding: 0 5%;
}
Step3: Using the class selector, we will now style our child element (.logo). We specified that it should "float to the left" of the window. The definitions of the height and width are "100%" and "40%," respectively. The articles were center-aligned, and the font colour was "white."
We gave the link in our navbar a little style. Their location was described as "float to the right." The definitions of the width and height were "60%" and "100%," respectively. The items were centred and the display was set to "flex."
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
}
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
Step4: Now we will add the styling to our font link . The font size set to 16px with text decoration as none and font color as "white " we have added some hover property as the user hover the bottom border of white color will appear under the links.
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
nav .links li {
list-style: none;
}
nav .links a {
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
position: relative;
}
nav .links a:hover {
color: white;
}
nav .links a::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
nav .links a:hover::before {
visibility: visible;
transform: scaleX(1);
color: white;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
transition: all 0.5s ease-in-out;
}
Step5: Now that the window's screen size has decreased to equal the window's stated width, we will add a responsiveness and testing function in CSS to add a toggle bar to reveal the menu items.
@media screen and (max-width: 768px) {
nav .logo {
float: none;
width: auto;
justify-content: center;
}
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0, 0, 0, 0.8);
overflow: hidden;
transition: all 0.5s ease-in-out;
}
nav .links a {
font-size: 20px;
}
nav :checked ~ .links {
bottom: 0;
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}
The project is now finished, we have completed Responsive Header using HTML and CSS.
That is it for this tutorial, I hope that you find it useful.
Now We have Successfully Responsive Header using HTML and CSS . You can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!!
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
Thank You For Reading !!!
follow : codewithrandom
Written By : arun
Code by : Tamunoibi
Posted on May 22, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
