Header

Header

The header is a top part of a website contains links of other webpages of your website and a company’s or brand’s logo. A website have many webpages for different different reasons like when you go to e-commerce website for online shopping and you see there is a header with the links – Cart, My Account i.e..
And these all are clickable and let you reach different different webpages via a click.


When visitors reach to a website they see the header first. Basically, It’s the part that never changes on any page of your website means it always shows with the navigation links and the logo.


This image has an empty alt attribute; its file name is screenshot-moderatorifra.zendesk.com-2021.09.10-21_43_10-2-1024x96.png



The logo is a image under the anchor tag and the links are the text under the anchor tags.

Header UI For Small Device

When you see a website on your mobiles and tables, the header links converts into a menu icon and a dropdown list as in the below screenshot.

This image has an empty alt attribute; its file name is screenshot-moderatorifra.zendesk.com-2021.09.12-20_36_29-1.png

It’s a basic UI for mobiles but depends on you, you can develop it as a sidebar or else.

Basic Header

There are many variants of header, you would get basic header of them here.



Header With Mobile Support

HTML Structure

<header class="header">
<div class="logo">
<a title="Home" href="#">
<img src="ADD LOGO IMAGE PATH HERE" alt="Logo">
</a>
</div>
<div class="wrapper">
<button class="navigation-button">☰</button>
<nav class="nav">
<a href="#">About Us</a>
<a href="#">Products</a>
<a href="#">Services</a>
<a href="#">Reach Us</a>
</nav>
</div>
</header>

CSS: For header section UI

.header {
background-color: #000;
padding: 0 30px;
align-items: center;
display: flex;
height: 90px;
justify-content: space-between;
}
.nav.active{
background-color: #000;
right: 0;
left: 0;
top: 90px;
display: inline-block;
position: absolute;
z-index: 999;
}
.nav a {
border-bottom: 1px solid #fff;
color: #fff;
display: none;
font-size: 16px;
padding: 0 20px 0 0;
width: auto;
padding-bottom: 10px;
}
.nav a:last-child {
border-bottom: 0;
}
.nav.active a{
display: block;
margin: 10px 25px;
color: #fff;
}
.navigation-button{
display: inline-block;
background-color: transparent;
border: 0;
color: #fff;
font-size: 20px;
}
@media (min-width: 768px){
.navigation-button{
display: none;
}
.nav a {
display: inline-block;
border-bottom: 0;
padding-bottom: 0;
}
}

Javascript Code: Function of mobile menu icon

  function headerNav(){
var navButton = document.querySelector('.navigation-button');
var navList = document.querySelector('.nav');

navButton.onclick = function() {
navList.classList.toggle('active');
}
}
headernav();



Add block