Creative Header 1

Welcome to Creative Headers

Creative Header Design 1

Welcome to my brand new series about making some cool and useful headers that you can use in your future projects

This is basic HTMl that you need to start, make changes according to your need described in comments

<div class="header">
    <div class="menu-items-container" id="menu-items-container">
        <div class="menu-item">
            <div class="item-icon">
                <!--Add your svg icon for menu option-->
            </div>
            <div class="item-name"><!--Add your name of menu option--></div>
        </div>
        <!--creat multiple "menu-item" divs for multiple options-->
    </div>
    <div class="header-container" id="header-container">
        <span class="site-heading"><!--Your Header Name Goes here--></span>
    </div>
    <div class="menu-btn">
        <button id="menuToggler">
            <!--Change below svg if you want to change hamburger menu icon-->
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <path id="togglerSvg" d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z"/>
            </svg>
        </button>
    </div>
</div>

This is basic CSS that you need to start, make changes according to your need described in comments

.header{
    /*background-color: #8B78E6;*/
    width: 100%;
    height: 90px;
}

.menu-items-container{
    width: 90%;
    height: 55px;
    background-color: #EA7773;
    position: absolute;
    /*left: 100%;*/
    top: 17.5px;
    transform-origin: 100% 50%;
    transform: rotateZ(-180deg);
    transition: 1s;
    white-space: nowrap;
    overflow-x: auto;
}

.menu-item{
    min-width: 20%;
    height: 100%;
    /*background: #456777;*/
    display: inline-flex;
    margin-left: 10px;
    margin-right: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

.item-icon{
    height: 70%;
    width: 100%;
    text-align: center;
}

.item-name{
    height: 30%;
    width: 100%;
    background-color: #238742;
    font-size: 14px;
    text-align: center;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 1px;
    padding-left: 5px;
    padding-right: 5px;
}

::-webkit-scrollbar {
    display: none;
}

.menu-item:last-of-type{
    margin-right: 40px;
}

.site-heading {
    font-size: 28px;
    color: #2B2B52;
    font-family: 'Calistoga', cursive;
}

.header-container{
    width: 90%;
    height: 55px;
    background-color: #EA7773;
    position: absolute;
    top: 17.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: 100% 50%;
    transition: 1s;
    /*transform: rotateZ(-180deg);*/
}

.menu-btn{
    width: 30%;
    height: 90px;
    /*background-color: #789789;*/
    position: absolute;
    left: 70%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.menu-btn button{
    width: 70px;
    height: 70px;
    border: 5px solid #EA7773;
    border-radius: 50%;
}

.menu-btn button:focus{ 
    outline: none;
}

Scroll Down

About Author

Hey, this is Raj here,
I am exploring my way in web designing.
this is a new series where I will create some headers that you can use in your projects

My Skills

HTML
CSS
JavaScript
PHP

Upcoming Projects

More Creative Headers
Personal notes MERN app
A cicket score app with web scrapping

Creative Navigation Desgin #1