Responsive header in HTML and CSS

In this tutorial, we are going to learn that 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 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 itself 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 tablets. 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 same. 

I am also providing you a video tutorial at the end of the post so you can easily understand the full tutorial on a 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.

Responsive header in HTML and CSS –


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.


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.


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




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 *