how to create a Responsive header menu with CSS

Hey Everyone Welcome to Frontend Gyaan and My New Blog. In this blog, I will share the code and Tips and Tricks on how to create a Responsive header menu with HTML and CSS only.

Follow @frontendgyaan on Instagram for web development content daily.

create a Responsive header menu with Logo with HTML and CSS

Also, Check out –

Before starting the blog, you might think about where you can use this project in real-life-based projects.  So it’s an Amazing Responsive Header Menu that you can change the design of the header depending on the screen size.

Let’s start making this Responsive header menu Using HTML & CSS step by step.

1. HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
 <a href="#default" class="logo"><img src="\Frontend gyaan logo.png" width="200px" height="40px"></a>
 <div class="header-right">
  <a class="active" href="#home">Home</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
 </div>
</div>

<div style="padding-left:20px">
 <h1 align="center">Welcome to Frontend Gyaan</h1>

</div>
</body>
</html>

2. CSS

body { 
 margin: 0;
 font-family: Arial, Helvetica, sans-serif;
 background-color:black;
 color:white;
}

.header {
 overflow: hidden;
 background-color: #ffffff;
 padding: 20px 10px;
}

.header a {
 float: left;
 color: black;
 text-align: center;
 padding: 12px;
 text-decoration: none;
 font-size: 18px; 
 line-height: 25px;
 border-radius: 4px;
}
\* for heading instead of logo*/
.header a.logo {
 font-size:25 px;
 font-weight: bold;
}

*.header a:hover {
 background-color: #ddd;
 color: black;
}

.header a.active {
 background-color: dodgerblue;
 color: white;
}

.header-right {
 float: right;
}

@media screen and (max-width: 500px) {
 .header a {
 float: none;
 display: block;
 text-align: center;
 }
 
 .header-right {
 float: none;
 
 }
}

Output – Responsive header menu

If you found any value in this blog you can support me by buying me a coffee.

If you found any value in this blog you can Follow Instagram Page @frontendgyaan

If you have any idea then you can contact us

Share your love

Leave a Reply