Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a responsive header with CSS?
On a web page, first the header is visible, then the content, and at the end the footer. A header includes the logo of the website and the menu. It can also include a search box on the right. The menus are created using the <nav> element. The selected link is always highlighted. On hovering any link, the color of that specific link change. Let us see how to create a responsive header with CSS on a web page.
Set the nav for logo and menus
The <nav> element is used to place the logo and menus. Both these are set using the <a> element −
<nav>
<a class="links logo" href="#">Company Logo/Image</a>
<div class="rightSection">
<a class="selected links" href="h">Home</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">About Us</a>
<a class="links" href="#">More Info</a>
<a class="links" href="#">Register</a>
</div>
</nav>
Position the menus
To position the menus correctly, use the overflow property and set it to hidden −
nav {
overflow: hidden;
background-color: #330b7c;
padding: 10px;
}
Position the menu links
The menu links are placed on the left under the <nav> using the float property with the value left. To remove the default underline from a link, use the text-decoration property and set it to none −
.links {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
float: left;
color:white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
Selected link
The link that are selected should have a different background and font color −
nav .selected {
background-color: dodgerblue;
color: white;
}
Set the responsiveness
When the web browser is set to less than 870px, the responsiveness works. The display property is set to the block value. The float is set to none −
@media screen and (max-width: 870px) {
nav .links {
float: none;
display: block;
text-align: left;
}
Example
The following is the code to create a responsive header with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
* {box-sizing: border-box;}
nav {
overflow: hidden;
background-color: #330b7c;
padding: 10px;
}
.links {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
float: left;
color:white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
nav .logo {
font-size: 25px;
font-weight: bold;
}
nav .links:hover {
background-color: rgb(214, 238, 77);
color: rgb(42, 10, 94);
}
nav .selected {
background-color: dodgerblue;
color: white;
}
.rightSection {
float: right;
}
@media screen and (max-width: 870px) {
nav .links {
float: none;
display: block;
text-align: left;
}
.rightSection {
float: none;
}
}
</style>
</head>
<body>
<nav>
<a class="links logo" href="#">Company Logo/Image</a>
<div class="rightSection">
<a class="selected links" href="h">Home</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">About Us</a>
<a class="links" href="#">More Info</a>
<a class="links" href="#">Register</a>
</div>
</nav>
</body>
</html>
3K+ Views
