Responsive header in HTML and CSS

In this tutorial, we are going to learn how to create a responsive header in HTML and CSS only. In today’s time, there are many ways you can create a header either it can be a static header which remains the same in all screen sizes and a static header is easy to build.

But a responsive header is what we need. A responsive header is adjusted according to the size of the screen. Either you are opening your website on PC, Laptop, mobile, or tablet responsive header give you a better view experience.

So as a developer it is our duty to make our website responsive so everyone can view our website normally on an android phone or tablet. In order to accomplish that you have to design your website in a responsive manner that whenever your site is open, either on desktop or mobile it always looks the same. I am also providing you a video tutorial so you can easily understand the full tutorial on a responsive header in HTML and CSS.

You can also check :

  1. Phone Number Validation in HTML5
  2. How To Get Multiple Elements By Id Using Javascript
  3. How to remove duplicates from javascript array

Watch the full video tutorial to understand responsive header in HTML and CSS. Don’t forget to Subscribe My Youtube Channel.

responsive_header_in_html_and_css

So, now let’s start our tutorial for this we are creating a three file one is obviously an HTML file and other two are CSS file.

  1. index.html
  2. style.css
  3. responsive.css

First, we are creating an index.html file which contains all HTML tag which is required to create a structure for a responsive header. For this we are creating one main <div> and two subs <div> that sub <div> is reside inside the main div. one sub div contain website title and other sub div contain our website menu.

responsive header in HTML and CSS

Above image easily clarify the structure of our responsive header. First, we create the main <div> with 100% width and website title <div> with 30% width and remaining 70% width goes to menu div section.

A responsive header in HTML and CSS –

index.html

<!DOCTYPE html>
<html>
	<head>
	<title>Responsive Header</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=1">
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="responsive.css">
	</head>
<body>
<div id="header">
		<div id="logo">
			<h1>CODEKILA</h1>
		</div>
	        <div id="menu">
		   <ul>
			<li> <a href="#">Home</a></li>
			<li> <a href="#">Gallery</a></li>
			<li> <a href="#">About</a></li>
			<li> <a href="#">Contact</a></li>
		   </ul>
         </div>

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

In the second part, we design and properly arrange the DOM (Document Object Model) using CSS for which we create a separate file called style.css in which we put our designing code. We can also put this code in index.html but it looks bad so we have to separate the code.

style.css

body{
margin:0px;
}
#header
{
	width:100%;
	float:left;
	text-align:center;
	background-color:skyblue;
}
#logo
{
	width:30%;
	float:left;
}
#logo h1
{
	cursor:pointer;
	transition:1s;
	color:white;
	font-family:cambria;
}
#logo h1:hover
{
	color:black;
}

#menu
{
	float:left;
	width:70%;
}
#menu ul
{
	  margin-right: 10%;
	  padding: 0;
	  float:right;
	  text-align: center;
}
#menu ul li
{
cursor:pointer;
list-style-type:none;
display:inline-block;
padding:8px;
}

#menu ul li a
{
	font-family:cambria;
text-decoration:none;
color:white;
font-size:20px;
}
#menu ul li a:hover
{
color:black;
}

In the third part, we make our design responsive using CSS media query for which we create a separate file called responsive.css in which we put our responsive designing code. To manage a design we only need a media query at two sizes, one is at 590px and other is 320px but it will be a different base on the header design.

responsive.css

@media only screen and (max-width: 590px) {
	#header
	{
		font-size:14px;
	}
	#logo
	{
		width:100%;
		float:left;
		text-align:center;
	}
	#menu
	{
		width:100%;
		margin: 0 auto;
	}
	#menu ul
	{
		float:none;
		margin-right:0px;
	}
}
@media only screen and (max-width: 320px) {
	#header
	{
		font-size:12px;
	}
	#logo h1
	{
		margin-bottom:1%;

	}
	  #menu ul li
	{
		display:block;
	}
 }

So we have created our three files and know it’s time to run and when you reduce the screen size header automatically adjusted itself according to the screen size.

Also Read:

  1. Create a responsive fixed header in HTML, and CSS
  2. Create a responsive sticky header using HTML, CSS, and JS
  3. How to check if object is empty in javascript

DEMO | DOWNLOAD

Conclusion:

In this tutorial, we can see how we can create a responsive header in HTML and CSS just using two languages we achieve a responsive header.

If you have any query related to this post feel free to comment on the comment box. Do not forget to share this post because someone else also needs this. And don’t forget to like on Facebook Page.

Leave a Reply

Your email address will not be published. Required fields are marked *