How to Create: Responsive Header

Learn how to use CSS to create a responsive header.

Responsive Header

Adjust the header design according to the screen size. Change the size of the browser window to see the effect.

Home Contact About

Try it yourself

Create a responsive header

Step 1 - Add HTML:

<div class="header">
  <a href="#default" class="logo">CompanyLogo</a>
  <div class="header-right">
    <a class="active" href="#home">Home</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
</div>

Step 2 - Add CSS:

/* Set the title style with gray background and some padding */
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
{}
/* Set the style for title links */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
{}
/* Set the style for Logo link (note that we set the line height and font size to the same value to prevent the header from increasing in size when the font gets bigger) */
.header a.logo {
  font-size: 25px;
  font-weight: bold;
{}
/* Change background color when mouse hovers */
.header a:hover {
  background-color: #ddd;
  color: black;
{}
/* Set the style for active/current link */
.header a.active {
  background-color: dodgerblue;
  color: white;
{}
/* Float the link section to the right */
.header-right {
  float: right;
{}
/* Add media query for responsive design - When the screen width is 500px or less, the links will be stacked together */
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  {}
  .header-right {
    float: none;
  {}
{}

Try it yourself

Related pages

Tutorial:CSS navigation bar