diff --git a/js navbar/Readme.md b/js navbar/Readme.md
new file mode 100644
index 0000000..3291b63
--- /dev/null
+++ b/js navbar/Readme.md
@@ -0,0 +1 @@
+### This is a navbar component which is made responsive using DOM manipulation.
diff --git a/js navbar/css/resp.css b/js navbar/css/resp.css
new file mode 100644
index 0000000..a3c0b0b
--- /dev/null
+++ b/js navbar/css/resp.css
@@ -0,0 +1,24 @@
+@media only screen and (max-width:800px) {
+ .line {
+ visibility: visible;
+ }
+ .nav-menu {
+ flex-direction: column;
+ }
+ .nav-items {
+ flex-direction: column;
+ height: 0px;
+ transition: all 0.6s ease-in;
+ /* //-> the transition property will work on the selected query on which we apply toggle in JS, So it is applied on "nav-items" not on "show-items" */
+ }
+ .show-items {
+ height: 210px;
+ }
+ .nav-resp {
+ /* height: 40px; */
+ }
+ .navbar {
+ /* height: 100px; */
+ }
+ .nav-menu {}
+}
\ No newline at end of file
diff --git a/js navbar/css/style.css b/js navbar/css/style.css
new file mode 100644
index 0000000..b7b593b
--- /dev/null
+++ b/js navbar/css/style.css
@@ -0,0 +1,49 @@
+* {
+ margin: 0px;
+ padding: 0px;
+}
+
+.navbar {
+ background: rgba(0, 0, 0, 0.7);
+}
+
+.nav-menu {
+ display: flex;
+}
+
+.nav-items {
+ display: flex;
+}
+
+.pic img {
+ height: 40px;
+ width: 40px;
+ border: 2px solid grey;
+ border-radius: 25px;
+ margin: 5px;
+ cursor: pointer;
+}
+
+.nav-items li {
+ list-style: none;
+ margin: 10px 20px;
+ padding: 4px;
+ color: white;
+ font-size: 1.3rem;
+ cursor: pointer;
+}
+
+.burger {
+ position: absolute;
+ right: 4px;
+ top: 10px;
+ cursor: pointer;
+}
+
+.line {
+ width: 30px;
+ margin: 4px;
+ height: 4px;
+ background: white;
+ visibility: hidden;
+}
\ No newline at end of file
diff --git a/js navbar/ind.html b/js navbar/ind.html
new file mode 100644
index 0000000..4a9eb18
--- /dev/null
+++ b/js navbar/ind.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+ Navigation Bar
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js navbar/logo.jpg b/js navbar/logo.jpg
new file mode 100644
index 0000000..78bf6dc
Binary files /dev/null and b/js navbar/logo.jpg differ
diff --git a/js navbar/resp.js b/js navbar/resp.js
new file mode 100644
index 0000000..1b42db2
--- /dev/null
+++ b/js navbar/resp.js
@@ -0,0 +1,6 @@
+let burger = document.querySelector(".burger");
+let navitems = document.querySelector(".nav-items");
+
+burger.addEventListener('click', () => {
+ navitems.classList.toggle('show-items');
+})
\ No newline at end of file