<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.
Solution
Here is the code to change header size –
<article>
<header>
<h1>How to change header size in css?</h1>
<img src="https://akashmittal.com/wp-content/uploads/2020/10/site-logo-small.png" />
<p>A header is the html element which signifies the introduction of a section.</p>
</header>
<div>
<p>Here we can write the complete article.</p>
</div>
</article>
<style>
header {
display: block;
height: 100px;
}
</style>
The header can also be used to display site identity like this –
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">
<head>
<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? AkashMittal.com</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1 id="site-title">This is header</h1>
</header>
<main>
<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>
</main>
<script>
window.onscroll = function () {
scrollFunction();
};
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";
}
}
</script>
<style>
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;
}
</style>
</body>
</html>
The header with and without scrolling will look like this –
Live Demo
Conclusion
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.
