Open In App
Related Articles

Design a Navigation Bar with Animated Search Box

Improve Article
Save Article
Like Article

A navigation bar is one of the most important components of a website. It is the top bar that generally contains all the essential links in form of menus.

In this tutorial, we are going to create a navigation bar with the following components:

  • Menus
  • An animated search bar
  • Login icon
  • Logo

But before moving on to the code let us see what languages we are going to use for the code, for the basic structure and the style we are going to use HTML CSS, and JQuery for the animated search bar.


  • Link the jquery and the stylesheet with the HTML code.
  • Design the jquery code for the animated search bar using the toggle class.
  • Using the nav class to structure the elements to be included on the navigation bar.
  • Design each element and the whole navigation bar as a whole using the CSS.

Here is the implementation of the above approach:

The code:


<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <!-- Linking the stylesheet -->
    <link rel="stylesheet" href=
    <!-- Linking the Jquery script -->
    <script src=""></script>
        $(document).ready(function() {
            $(".fa-search").click(function() {
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <script src=""></script>
        /* Importing the fonts */
        @import url(
        * {
            margin: 0;
            padding: 0;
            outline: none;
            box-sizing: border-box;
            font-family: 'Montserrat', sans-serif;
        /* Body of the page */
        body {
            background: #f2f2f2;
        /* Styling all the elements in nav as a whole */
        nav {
            background: #037729;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            height: 70px;
            padding: 0 100px;
        /* Styling the logo */
        nav .logo {
            color: #fff;
            font-size: 30px;
            font-weight: 600;
            letter-spacing: -1px;
        /* Styling all the nav items as a whole */
        nav .nav-items {
            display: flex;
            flex: 1;
            padding: 0 0 0 200px;
        /* Styling the list items in the nav tag */
        nav .nav-items li {
            list-style: none;
            padding: 0 10px;
        /* Styling each list items */
        nav .nav-items li a {
            color: #fff;
            font-size: 15px;
            font-weight: 500;
            text-decoration: none;
        /* Setting the hover colour on the list items*/
        nav .nav-items li a:hover {
            color: #19191b;
        nav .searchbar {
            position: relative;
        /* Styling the search box where the 
            input would be given */
        nav .searchbar input[type="text"] {
            border: 0;
            padding: 0;
            width: 0px;
            height: 35px;
            border-radius: 3px;
            transition: all 0.3s ease;
        /* Styling the search bar icon */
        nav .searchbar .icon {
            display: flex;
            position: absolute;
            top: 0;
            right: 0;
            width: 35px;
            height: 100%;
            background: none;
            border-radius: 3px;
            color: #fff;
            transition: all 0.5s 0.3s ease;
        nav .searchbar .icon i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
        nav .searchbar {
            background: #062333;
            transition: all 0.3s ease;
        nav .searchbar input[type="text"].active {
            width: 250px;
            padding: 0 10px;
            transition: all 0.5s 0.2s ease;
        nav .licon li {
            list-style: none;
            display: flex;
        nav .licon li a {
            padding: 0 20px;
        /* Changing the colour of the login 
            icon when hovered over*/
        .fa-user-circle:hover {
            color: #0e0d0d !important;
        <div class="logo">
        <div class="nav-items">
            <!-- The Menu items -->
            <li><a href="#">TUTORIALS</a></li>
            <li><a href="#">STUDENT</a></li>
            <li><a href="#">JOBS</a></li>
            <li><a href="#">COURSES</a></li>
        <!-- Defining the search bars -->
        <div class="searchbar">
            <input type="text" placeholder="search">
            <div class="icon">
                <i class="fas fa-search"></i>
        <!-- Defining the login button -->
        <div class="licon">
                <a href="#">
                    <i class="fas fa-user-circle
                        fa-2x" style="color: white;">


  • Only adding the HTML file along with the jQuery would produce the following result:

  • Adding the CSS stylesheet along with the HTML and jquery code would produce the final result:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 20 Jan, 2021
Like Article
Save Article
Similar Reads
Complete Tutorials