DEV Community

Cover image for How to built a Instagram Navbar Clone | HTML CSS & Js
adwait12345
adwait12345

Posted on

How to built a Instagram Navbar Clone | HTML CSS & Js

Learn how to create an Instagram Navbar clone with pure HTML CSS and JavaScript!
This project is good for beginners to start with , and after completing this project you will be confident enough to built like Instagram's components.
Below is the reference video for proper execution

How to Subscribe Bocadmium: https://www.youtube.com/channel/UC-AjAUV5Q42VV1Yv8oh6apg

Source Code:

1)index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Linking Css file  -->
    <link rel="stylesheet" href="style.css">
    <!-- Linking Js file  -->
    <script src="main.js"></script>
    <!-- Title  -->
    <title>Instagram</title>
</head>

<body>
    <!-- Created Nav  -->
    <nav class="nav">
         <!-- Created a container  -->
         <div class="wrapper">
         <!-- Made a logo container  -->
            <div class="logo" style="padding-top: 8px;padding-right: 110px;">
                <img src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" alt="">
             </div>
             <!-- Logo container ends here -->

             <!-- Created search container  -->
            <div class="search">
                <input
                    style="border: 1px solid #dbdbdb; background-color: #fafafa; height: 27.5px;width: 12.5rem ;border-radius: 3.5px;padding-left: 25px;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;"
                    type="text" placeholder="Search">
            </div>
            <!-- search Container ends here  -->

            <!-- Created icons container  -->
            <div class="icons">
                <!-- Home starts  -->
                <div class="home">
                    <svg aria-label="Home" class="_8-yf5 " color="#262626" fill="#262626" height="22" role="img"
                        viewBox="0 0 48 48" width="22">
                        <path id="home1"
                            d="M45.5 48H30.1c-.8 0-1.5-.7-1.5-1.5V34.2c0-2.6-2.1-4.6-4.6-4.6s-4.6 2.1-4.6 4.6v12.3c0 .8-.7 1.5-1.5 1.5H2.5c-.8 0-1.5-.7-1.5-1.5V23c0-.4.2-.8.4-1.1L22.9.4c.6-.6 1.6-.6 2.1 0l21.5 21.5c.3.3.4.7.4 1.1v23.5c.1.8-.6 1.5-1.4 1.5z">
                        </path>
                    </svg>
                </div>
                     <!-- Home ends  -->

                     <!-- explore starts  -->
                <div class="explore">
                    <svg aria-label="Direct" class="_8-yf5 " color="#262626" fill="#262626" height="22" role="img"
                        viewBox="0 0 48 48" width="22">
                        <path
                            d="M47.8 3.8c-.3-.5-.8-.8-1.3-.8h-45C.9 3.1.3 3.5.1 4S0 5.2.4 5.7l15.9 15.6 5.5 22.6c.1.6.6 1 1.2 1.1h.2c.5 0 1-.3 1.3-.7l23.2-39c.4-.4.4-1 .1-1.5zM5.2 6.1h35.5L18 18.7 5.2 6.1zm18.7 33.6l-4.4-18.4L42.4 8.6 23.9 39.7z">
                        </path>
                    </svg>
                </div>
                      <!-- explore ends  -->

                      <!-- create starts  -->
                <div class="create">
                    <svg aria-label="New Post" class="_8-yf5 " color="#262626" fill="#262626" height="22" role="img"
                        viewBox="0 0 48 48" width="22">
                        <path
                            d="M31.8 48H16.2c-6.6 0-9.6-1.6-12.1-4C1.6 41.4 0 38.4 0 31.8V16.2C0 9.6 1.6 6.6 4 4.1 6.6 1.6 9.6 0 16.2 0h15.6c6.6 0 9.6 1.6 12.1 4C46.4 6.6 48 9.6 48 16.2v15.6c0 6.6-1.6 9.6-4 12.1-2.6 2.5-5.6 4.1-12.2 4.1zM16.2 3C10 3 7.8 4.6 6.1 6.2 4.6 7.8 3 10 3 16.2v15.6c0 6.2 1.6 8.4 3.2 10.1 1.6 1.6 3.8 3.1 10 3.1h15.6c6.2 0 8.4-1.6 10.1-3.2 1.6-1.6 3.1-3.8 3.1-10V16.2c0-6.2-1.6-8.4-3.2-10.1C40.2 4.6 38 3 31.8 3H16.2z">
                        </path>
                        <path
                            d="M36.3 25.5H11.7c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5h24.6c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5z">
                        </path>
                        <path
                            d="M24 37.8c-.8 0-1.5-.7-1.5-1.5V11.7c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5v24.6c0 .8-.7 1.5-1.5 1.5z">
                        </path>
                    </svg>
                </div>
                       <!-- create ends  -->

                       <!-- compass starts  -->
                <div class="compass">
                    <svg aria-label="Find People" class="_8-yf5 " color="#262626" fill="#262626" height="22" role="img"
                        viewBox="0 0 48 48" width="22">
                        <path clip-rule="evenodd"
                            d="M24 0C10.8 0 0 10.8 0 24s10.8 24 24 24 24-10.8 24-24S37.2 0 24 0zm0 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm10.2-33.2l-14.8 7c-.3.1-.6.4-.7.7l-7 14.8c-.3.6-.2 1.3.3 1.7.3.3.7.4 1.1.4.2 0 .4 0 .6-.1l14.8-7c.3-.1.6-.4.7-.7l7-14.8c.3-.6.2-1.3-.3-1.7-.4-.5-1.1-.6-1.7-.3zm-7.4 15l-5.5-5.5 10.5-5-5 10.5z"
                            fill-rule="evenodd"></path>
                    </svg>
                </div>
                         <!-- compass ends  -->

                         <!-- Heart starts   -->
                <div class="heart">
                    <svg aria-label="Activity Feed" class="_8-yf5 " color="#262626" fill="#262626" height="22"
                        role="img" viewBox="0 0 48 48" width="22">
                        <path
                            d="M34.6 6.1c5.7 0 10.4 5.2 10.4 11.5 0 6.8-5.9 11-11.5 16S25 41.3 24 41.9c-1.1-.7-4.7-4-9.5-8.3-5.7-5-11.5-9.2-11.5-16C3 11.3 7.7 6.1 13.4 6.1c4.2 0 6.5 2 8.1 4.3 1.9 2.6 2.2 3.9 2.5 3.9.3 0 .6-1.3 2.5-3.9 1.6-2.3 3.9-4.3 8.1-4.3m0-3c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5.6 0 1.1-.2 1.6-.5 1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z">
                        </path>
                    </svg>
                </div>
                           <!-- Heart ends  -->

                           <!-- Profile image starts  -->
                <div class="profile-img">
                     <!-- Profile icon start  -->
                    <div> <span style="width:22px;height:22px; border: 1px solid #fafafa;">
                            <img style="width:22px;height:22px;border-radius: 100%;" src="./images/profile.png" alt="">
                        </span>
                    </div>
                    <!-- Profile icons ends  -->

                    <!-- Drop down menu starts  -->
                    <div class="drop-down">
                        <!-- pointer for drop down  -->
                        <div class="square" style="
                            width: 15px;
                            height: 15px;
                            background-color: #ffffff;
                            position: absolute;
                            top: -8px;
                            right: 18px;
                            z-index: 0;
                            transform: rotateZ(45deg);
                            box-shadow:-5px -5px 5px 0px rgb(0 0 0 / 10%);">
                            </div>
                            <!-- pointer ends  -->

                        <ul>
                            <!-- 1 item start  -->
                            <li>
                                <svg aria-label="Profile" class="_8-yf5 " color="#262626" fill="#262626" height="16"
                                    role="img" viewBox="0 0 32 32" width="16">
                                    <path
                                        d="M16 0C7.2 0 0 7.1 0 16c0 4.8 2.1 9.1 5.5 12l.3.3C8.5 30.6 12.1 32 16 32s7.5-1.4 10.2-3.7l.3-.3c3.4-3 5.5-7.2 5.5-12 0-8.9-7.2-16-16-16zm0 29c-2.8 0-5.3-.9-7.5-2.4.5-.9.9-1.3 1.4-1.8.7-.5 1.5-.8 2.4-.8h7.2c.9 0 1.7.3 2.4.8.5.4.9.8 1.4 1.8-2 1.5-4.5 2.4-7.3 2.4zm9.7-4.4c-.5-.9-1.1-1.5-1.9-2.1-1.2-.9-2.7-1.4-4.2-1.4h-7.2c-1.5 0-3 .5-4.2 1.4-.8.6-1.4 1.2-1.9 2.1C4.2 22.3 3 19.3 3 16 3 8.8 8.8 3 16 3s13 5.8 13 13c0 3.3-1.2 6.3-3.3 8.6zM16 5.7c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 11c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z">
                                    </path>
                                </svg>
                                <a href="#">Profile</a>
                            </li>
                            <!-- 1 ends  -->

                            <!-- 2 item starts  -->
                            <li>
                                <svg aria-label="Saved" class="_8-yf5 " color="#262626" fill="#262626" height="16"
                                    role="img" viewBox="0 0 32 32" width="16">
                                    <path
                                        d="M28.7 32c-.4 0-.8-.2-1.1-.4L16 19.9 4.4 31.6c-.4.4-1.1.6-1.6.3-.6-.2-.9-.8-.9-1.4v-29C1.8.7 2.5 0 3.3 0h25.4c.8 0 1.5.7 1.5 1.5v29c0 .6-.4 1.2-.9 1.4-.2.1-.4.1-.6.1zM4.8 3v23.9l9.4-9.4c.9-.9 2.6-.9 3.5 0l9.4 9.4V3H4.8z">
                                    </path>
                                </svg>
                                <a href="#">Saved</a>
                            </li>
                            <!-- 2 ends  -->

                            <!-- 3 item starts  -->
                            <li>
                                <svg aria-label="Settings" class="_8-yf5 " color="#262626" fill="#262626" height="16"
                                    role="img" viewBox="0 0 32 32" width="16">
                                    <path
                                        d="M31.2 13.4l-1.4-.7c-.1 0-.2-.1-.2-.2v-.2c-.3-1.1-.7-2.1-1.3-3.1v-.1l-.2-.1v-.3l.5-1.5c.2-.5 0-1.1-.4-1.5l-1.9-1.9c-.4-.4-1-.5-1.5-.4l-1.5.5H23l-.1-.1h-.1c-1-.5-2-1-3.1-1.3h-.2c-.1 0-.1-.1-.2-.2L18.6.9c-.2-.5-.7-.9-1.2-.9h-2.7c-.5 0-1 .3-1.3.8l-.7 1.4c0 .1-.1.2-.2.2h-.2c-1.1.3-2.1.7-3.1 1.3h-.1l-.1.2h-.3l-1.5-.5c-.5-.2-1.1 0-1.5.4L3.8 5.7c-.4.4-.5 1-.4 1.5l.5 1.5v.5c-.5 1-1 2-1.3 3.1v.2c0 .1-.1.1-.2.2l-1.4.7c-.6.2-1 .7-1 1.2v2.7c0 .5.3 1 .8 1.3l1.4.7c.1 0 .2.1.2.2v.2c.3 1.1.7 2.1 1.3 3.1v.1l.2.1v.3l-.5 1.5c-.2.5 0 1.1.4 1.5l1.9 1.9c.3.3.6.4 1 .4.2 0 .3 0 .5-.1l1.5-.5H9l.1.1h.1c1 .5 2 1 3.1 1.3h.2c.1 0 .1.1.2.2l.7 1.4c.2.5.7.8 1.3.8h2.7c.5 0 1-.3 1.3-.8l.7-1.4c0-.1.1-.2.2-.2h.2c1.1-.3 2.1-.7 3.1-1.3h.1l.1-.1h.3l1.5.5c.1 0 .3.1.5.1.4 0 .7-.1 1-.4l1.9-1.9c.4-.4.5-1 .4-1.5l-.5-1.5V23l.1-.1v-.1c.5-1 1-2 1.3-3.1v-.2c0-.1.1-.1.2-.2l1.4-.7c.5-.2.8-.7.8-1.3v-2.7c0-.5-.4-1-.8-1.2zM16 27.1c-6.1 0-11.1-5-11.1-11.1S9.9 4.9 16 4.9s11.1 5 11.1 11.1-5 11.1-11.1 11.1z">
                                    </path>
                                </svg>
                                <a href="#">Settings</a>
                            </li>
                            <!-- 3 ends  -->

                            <!-- 4 item starts  -->
                            <li>
                                <svg aria-label="Switch Accounts" class="_8-yf5 " color="#262626" fill="#262626"
                                    height="16" role="img" viewBox="0 0 32 32" width="16">
                                    <path
                                        d="M10.3 10.7c0-.8-.7-1.5-1.5-1.5H4.9C7.2 5.4 11.4 3 16 3c3.6 0 7 1.5 9.5 4.1.5.6 1.5.6 2.1.1.6-.6.6-1.5.1-2.1-3-3.2-7.3-5-11.7-5C10.7 0 6 2.5 3 6.7V3.5C3 2.7 2.3 2 1.5 2S0 2.7 0 3.5v7.2c0 .8.7 1.5 1.5 1.5h7.3c.8 0 1.5-.6 1.5-1.5zm20.2 9.1h-7.2c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h3.8C24.8 26.6 20.6 29 16 29c-3.6 0-7-1.5-9.5-4.1-.5-.6-1.5-.6-2.1-.1-.6.6-.6 1.5-.1 2.1 3 3.2 7.3 5 11.7 5 5.3 0 10-2.5 13-6.7v3.2c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-7.2c0-.8-.7-1.4-1.5-1.4z">
                                    </path>
                                </svg>
                                <a href="#">Switch Accounts</a>
                            </li>
                            <!-- 5 item starts  -->
                            <li style="border-top:2px solid #dbdbdb;"><a href="#">Log Out</a>
                            </li>
                            <!-- 5 ends  -->
                        </ul>
                    </div><!-- Drop down menu ends  -->  

                </div> <!-- Profile image ends  -->

            </div><!-- Icons container ends here  -->

           </div><!-- Container ends here  -->

    </nav><!-- Nav ends here -->

</body>


</html>






Enter fullscreen mode Exit fullscreen mode

2) style.css

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #fafafa;
}
.nav {
  position: absolute;
  width: 100%;
  height: 54px;
  top: 0;
  background-color: #ffffff;
  border-bottom: 1px solid #dbdbdb;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.wrapper {
  position: relative;
  width: 975px;
  height: 54px;
  top: 0;
  background-color: #ffffff;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 0px 0px 18px;
}
.icons {
  width: 300px;
  display: flex;
  justify-content: space-evenly;
}
.logo,
.home,
.explore,
.create,
.compass,
.heart,
.profile-img {
  cursor: pointer;
}
/* drop-down */
.drop-down {
  position: absolute;
  top: 53px;
  width: 201px;
  height: 200px;
  box-shadow: 0 0 5px 1px rgb(0 0 0 / 10%);
  background-color: #ffffff;
  border-radius: 5px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  z-index: 1;
  right: 1%;
  visibility: hidden;
}
.drop-down ul {
  display: flex;
  flex-direction: column;
}
.drop-down ul li {
  padding: 8px 16px;
  list-style: none;
}
.drop-down ul li:hover {
  background-color: #fafafa;
}
.drop-down ul li a {
  text-decoration: none;

  color: #2b2b2b;
}

Enter fullscreen mode Exit fullscreen mode

3) main.js

let togglestatus = true;
document.addEventListener("DOMContentLoaded", (event) => {
  console.log("hi");
  const p = document.querySelector(".profile-img");
  p.addEventListener("click", () => {
    if (togglestatus === false) {
      document.querySelector(".drop-down").style.visibility = "hidden";
      document
        .querySelector("#home1")
        .setAttribute(
          "d",
          "M45.5 48H30.1c-.8 0-1.5-.7-1.5-1.5V34.2c0-2.6-2.1-4.6-4.6-4.6s-4.6 2.1-4.6 4.6v12.3c0 .8-.7 1.5-1.5 1.5H2.5c-.8 0-1.5-.7-1.5-1.5V23c0-.4.2-.8.4-1.1L22.9.4c.6-.6 1.6-.6 2.1 0l21.5 21.5c.3.3.4.7.4 1.1v23.5c.1.8-.6 1.5-1.4 1.5z"
        );

      togglestatus = true;
    } else if (togglestatus === true) {
      document.querySelector(".drop-down").style.visibility = "visible";
      document
        .querySelector("#home1")
        .setAttribute(
          "d",
          "M45.3 48H30c-.8 0-1.5-.7-1.5-1.5V34.2c0-2.6-2-4.6-4.6-4.6s-4.6 2-4.6 4.6v12.3c0 .8-.7 1.5-1.5 1.5H2.5c-.8 0-1.5-.7-1.5-1.5V23c0-.4.2-.8.4-1.1L22.9.4c.6-.6 1.5-.6 2.1 0l21.5 21.5c.4.4.6 1.1.3 1.6 0 .1-.1.1-.1.2v22.8c.1.8-.6 1.5-1.4 1.5zm-13.8-3h12.3V23.4L24 3.6l-20 20V45h12.3V34.2c0-4.3 3.3-7.6 7.6-7.6s7.6 3.3 7.6 7.6V45z"
        );
      togglestatus = false;
    }
  });
});

Enter fullscreen mode Exit fullscreen mode

Thank you 😊

Top comments (11)

Collapse
 
brendan8c profile image
Artem • Edited

Actually, I don't see anything unique here.
In addition to the layout of the site header 💁🏼‍♂️

Collapse
 
adwait12345 profile image
adwait12345

Bro it for encouraging beginners 😅.
BTW thank for reply

Collapse
 
brendan8c profile image
Artem

Beginners will not figure out how the javascript code works without a glass 😁

Thread Thread
 
adwait12345 profile image
adwait12345

OK bro you win i lose 😎

Thread Thread
 
brendan8c profile image
Artem

Now I'm not comfortable.
I'm sorry bro

Collapse
 
shyam3050 profile image
Shyam3050

const profile = document.querySelector(".profile-img");
const dropDown = document.querySelector(".drop-down");
const homeColorChange = document.querySelector("#home1");
const whiteHome =
"M45.3 48H30c-.8 0-1.5-.7-1.5-1.5V34.2c0-2.6-2-4.6-4.6-4.6s-4.6 2-4.6 4.6v12.3c0 .8-.7 1.5-1.5 1.5H2.5c-.8 0-1.5-.7-1.5-1.5V23c0-.4.2-.8.4-1.1L22.9.4c.6-.6 1.5-.6 2.1 0l21.5 21.5c.4.4.6 1.1.3 1.6 0 .1-.1.1-.1.2v22.8c.1.8-.6 1.5-1.4 1.5zm-13.8-3h12.3V23.4L24 3.6l-20 20V45h12.3V34.2c0-4.3 3.3-7.6 7.6-7.6s7.6 3.3 7.6 7.6V45z";
const blackHome =
"M45.5 48H30.1c-.8 0-1.5-.7-1.5-1.5V34.2c0-2.6-2.1-4.6-4.6-4.6s-4.6 2.1-4.6 4.6v12.3c0 .8-.7 1.5-1.5 1.5H2.5c-.8 0-1.5-.7-1.5-1.5V23c0-.4.2-.8.4-1.1L22.9.4c.6-.6 1.6-.6 2.1 0l21.5 21.5c.3.3.4.7.4 1.1v23.5c.1.8-.6 1.5-1.4 1.5z";
profile.addEventListener("click", () => {
dropDown.classList.toggle("hidden");
if (!dropDown.classList.contains("hidden")) {
homeColorChange.setAttribute("d", whiteHome);
} else if (dropDown.classList.contains("hidden")) {
homeColorChange.setAttribute("d", blackHome);
}
});

// i wrote this type of js because i am begginer. Is it ok bro.

Collapse
 
shyam3050 profile image
Shyam3050

// I think! here you can use icons then code will be reduced.
// Any way thanks for this awesome tutorial.

Collapse
 
adwait12345 profile image
adwait12345

Thank you Bro for replying
and in professional websites svgs are used and we can dynamically change them with js , but if you want to use icons you an definitely use there is no restrictions 😅

Collapse
 
codeflix profile image
Codeflix

Nice project 👍 ,but you should add explanation also this will help the beginners.

Collapse
 
adwait12345 profile image
adwait12345

give me one more chance bro i will definitely include explanation from next time.
thanks for reply bro 😊

Collapse
 
lilfred profile image
Lil-Fred

Nice project here,
Was wondering whether I cud make a video abt it on ma yet channel