Navbar/Header

Headers represent the navigation pages that can be quickly made from any page of the website. These are commonly the most accessible parts for easy navigation like contatc page, home page, profile page, about page and so on.

Basic header

This has the nav menu on the left with the brand name and comes with main action items on the right. This is responsive in nature, check it out by resizing the window.

                    
<nav class="nav-container d-flex">
    <div class="nav-brand d-flex">
        <button class="fa fa-bars btn btn-link nav-btn"></button>
        <h2 class="nav-brand-name">Kalaakaar</h2>
    </div>
    <div class="nav-pills d-flex">
        <ul class="list list-no-bullet d-flex">
            <li class="list-item">
                <button class="btn btn-link nav-btn">Home</button>
            </li>
            <li class="list-item">
                <button class="btn btn-link nav-btn">About</button>
            </li>
            <li class="list-item">
                <button class="btn btn-link nav-btn">Contact</button>
            </li>
        </ul>
        <button class="fa fa-user-circle btn btn-link nav-btn"></button>
    </div>
</nav>
                        
                    
                

Short header

This is a short header with only necessary actions.

                    
<nav class="nav-container nav-short d-flex">
    <div class="nav-brand d-flex">
        <button class="fa fa-bars btn btn-link nav-btn"></button>
        <h2 class="nav-brand-name">Kalaakaar</h2>
        <button class="fa fa-user-circle btn btn-link nav-btn"></button>
    </div>
</nav>