Create Header Section with HTML, CSS, and Javascript?

Create Header Section with HTML, CSS, and Javascript?

If you need a professional and fully functional header section, I will completely guide you in this article. We are using HTML, CSS, and JavaScript for making headers. We are using javascript on the search bar and slider.


Step of Creating Header Section

1. Start With HTML

We are using FlexBox for making responsive headers. So, we need to write code according to desktop and mobile devices.

Flexbox is the collection of items in a row and column layout.


We are taking two div header and header items. We are using flexbox on header items. And we are taking background colour on header div.  In a header item, we have header left and header right item.

 <!-- Start Header Section -->

    <header>
        <div class="header-item">
            <div class="header-left">

                <div class="header-bars">
                    <span class="bars-icon"><i class="fas fa-bars"></i></span>
                </div>
                <div class="header-logo">
                    <a href="#">Sandesh Tandan</a>
                </div>

                <div class="header-links header-linklist">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Resources</a></li>
                        <li><a href="#">Websites</a></li>
                    </ul>
                </div>
            </div>

            <div class="header-right">
                <div class="header-search">
                    <span class="search-icon"><i class="fas fa-search"></i></span>
                </div>

            </div>
        </div>
    </header>

    <div class="header-input nav-input">
        <input type="search" placeholder="Search Blogger Templates...">

    </div>

    <!-- End of Header Section -->


2. Design With CSS

We can apply flexbox on header items. And there are required flex properties on many items. 

Media Queries is the way of making a responsive design on multiple devices. And we can change every HTML element in any devices size.

FlexBox Common Properties

  • display:flex;
  • flex-wrap:wrap;
  • justify-content:space-between;
  • gap: 1rem;
It is the required flexbox properties we can use in this header. While using wrap properties it can wrap every element in HTML. Justify-content makes item space on the page. A gap makes space on every flex item.

/* Start Header Section */

header {
    background-colorrgb(255255255);
    padding.7rem;
}

.header-item {
    displayflex;
    flex-wrapwrap;
    justify-contentspace-between;
    margin0 2rem;
}

.header-left.header-right {
    displayinline-flex;
    gap2rem;
    align-itemscenter;
}

.header-links ul {
    displayflex;
}

.header-logo a {
    text-decorationnone;
    font-size22px;
    font-weight600;
    white-spacenowrap;
}

.header-links ul li {
    list-style-typenone;
}

.header-links ul li a {
    text-decorationnone;
    color#000;
    margin0 2rem 0 0;
}

.header-links ul li a:hover {
    colorrgb(026255);
}

.bars-icon {
    cursorpointer;
    font-size18px;
    displaynone;
}

.bars-icon:hover {
    colorrgb(026255);
}

.search-icon {
    cursorpointer;
    font-size18px;
}

.search-icon:hover {
    colorrgb(026255);
}

.header-input {
    background-colorrgb(210214255);
    width100%;
    height30vh;
}

.header-input {
    positionabsolute;
    top6.5%;
    displayflex;
    justify-contentcenter;
    flex-directioncolumn;
    gap1rem;
    align-itemscenter;
    opacity1;
    transitionall .3s ease-in-out;
}

.header-input h2 {
    font-size25px;
    font-weight600;
}

.header-input input {
    width100%;
    max-width600px;
    height7vh;
    padding10px 50px;
    bordernone;
    outlinenone;
    font-size16px;
    background-imageurl('/images/searchicon.png');
    background-repeatno-repeat;
    background-positionleft;
    background-position-x10px;
    border-radius.25rem;
    colorrgb(535353);
}

.nav-input {
    opacity0;
    transitionall .3s ease-in-out;
}

@media(max-width:800px) {
    .header-links {
        positionabsolute;
        top7.5%;
        left0%;
        background-color#eef1f0;
        width100%;
        max-width300px;
        height100vh;
        transitionall .3s ease-in-out;
    }
    .bars-icon {
        displayblock;
    }
    .header-links ul {
        displayblock;
        margin1rem 0 0 3.5rem;
    }
    .header-links ul li {
        line-height3rem;
    }
    .header-links ul li a {
        font-size18px;
    }
    .header-linklist {
        left-100%;
        transitionall .3s ease-in-out;
    }
}

/* End of Header Section */


There we are also using media queries properties for making responsive on multiple devices. It is used to change elements in any devices size. The main fundamental of making responsive design is only using flexbox.


3. Apply Javascript

We are using javascript for making slider menu and search bar. When we click on the search icon the search input has been visible. And we click on the bars icon the slider menu has been open. First, we need to provide a script link on HTML. <script src="app.js"></script>. 


//Header Sidebar
const HeaderLinks = document.querySelector('.header-links');
const BarsIcon = document.querySelector('.bars-icon');

BarsIcon.addEventListener('click', () =>{
    HeaderLinks.classList.toggle('header-linklist')
})

//Header Search
const HeaderInput = document.querySelector('.header-input');
const SearchIcon = document.querySelector('.search-icon');

SearchIcon.addEventListener('click', () =>{
    HeaderInput.classList.toggle('nav-input');
})


It is the simple javascript code we can use in javascript. If you didn't understand it then watch youtube videos you can understand clearly.