Create A Responsive Header HTML CSS Tutorials

Learn how to create a responsive header with HTML, CSS

Create A Responsive Header

Step 1) Add HTML:

<div class="header">

  <a href="#default" class="logo">Main Page</a>

  <div class="header-right">

    <a class="active" href="#Service">Service</a>

    <a href="#contaAbout</a>

  </div>ct">Contact</a>

    <a href="#about">

</div>

Step 2  Add CSS:code:

<style>

* {box-sizing: border-box;}

body { 

  margin: 0;

  font-family: Arial, Helvetica, sans-serif;

}

.header {

  overflow: hidden;

  background-color: black;

  padding: 20px 10px;

}

.header a {

  float: left;

  color: white;

  text-align: center;

  padding: 12px;

  text-decoration: none;

  font-size: 18px; 

  line-height: 25px;

  border-radius: 4px;

}

.header a.logo {

  font-size: 25px;

  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: left;

  }

  

  .header-right {

    float: none;

  }

}

</style>

Step 3 Add main title to your header:

<div style="padding-left:20px">

  <h1>Main Page Header</h1>

  <p>Your first  responsive header project</p>

  <p>Article Text here</p>

</div>

Try it Here