How to change header size in CSS? Code Example

Table of Contents Hide
  1. Solution
  2. Live Demo
  3. Conclusion
    1. Related Posts

<header> is the html element which signifies the introduction of a section. It includes information like title of article, author name, excerpt, social links, number of shares & views etc.

You can have many <header> tags in a single page depending upon the context of sections. Like you can’t have header under <footer> or <address> tags.

In this article we will learn how to change header size using css.


Here is the code to change header size –

    <h1>How to change header size in css?</h1>
    <img src="" />
    <p>A header is the html element which signifies the introduction of a section.</p>
    <p>Here we can write the complete article.</p>

  header {
    display: block;
    height: 100px;

The header can also be used to display site identity like this –

website header

You can change the height of site header by multiple ways –

  • By increasing the size of logo image.
  • Increasing the font size of navigational links.
  • Setting fixed height of header element.

If you want to dynamically change the height of the header, like during scroll, then you will need some javascript.

Check out this code –

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>How to change header size on scroll?</title>
    <link rel="stylesheet" href="style.css" />
      <h1 id="site-title">This is header</h1>
      <p>This is a long page</p>
      <p>Adding few more paragraphs</p>
      <p>Adding few more paragraphs</p>
      <p>Adding few more paragraphs</p>
      <p>Adding few more paragraphs</p>
      <p>Adding few more paragraphs</p>

      window.onscroll = function () {

      function scrollFunction() {
        if (
          document.body.scrollTop > 50 ||
          document.documentElement.scrollTop > 50
        ) {
          document.getElementById("site-title").style.fontSize = "30px";
        } else {
          document.getElementById("site-title").style.fontSize = "60px";

      body {
        padding: 0;
        margin: 0;

      header {
        box-sizing: border-box;
        background-color: #0050fc; /* Grey background */
        padding: 20px; /* Some padding */
        color: white;
        position: fixed; /* Fixed position - sit on top of the page */
        top: 0;
        width: 100%; /* Full width */

      header h1 {
        transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
        font-size: 60px;

      main {
        height: 1000px;
        margin-top: 250px;


The header with and without scrolling will look like this –

header size change with scrolling

Live Demo

Open Live Demo


header element is html5 addition which signifies the information related to a section. This includes the overall site header as well as article header. We can change the size of headers using css.