Responsive sticky header using HTML-CSS-JS

In this tutorial, we are going to learn that how to create a responsive sticky header using HTML-CSS-JS 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 sticky header is what we need. A responsive sticky header is adjusted itself according to the size of the screen by maintaining their position is always on top when it reaches to top. Either you are opening your website on PC, Laptop, mobile, or tablet responsive fixed header give you a better view experience. So as a developer it is our duty to build 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 sticky header using HTML-CSS-JS but first watch my previous video on “Build a responsive header using HTML and CSS. So you can understand this tutorial in a better way.


Responsive sticky header in HTML and CSS and JS

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

  1. index.html
  2. style.css
  3. responsive.css
  4. scroll.js

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 sticky header using HTML-CSS-JS –


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.


In the fourth part, we have created a js which scroll.js  in which we change the class of header which makes it sticky and fixed. But this trigger only when header touches the top.


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. How to create a responsive header using HTML and CSS
  2. How to create a responsive fixed header using HTML and CSS 


In this tutorial, we can see how we can create a responsive sticky header in HTML and CSS just using three languages we achieve a responsive sticky 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 *