├── script.js
├── README.md
├── index.html
└── style.css
/script.js:
--------------------------------------------------------------------------------
1 | const hamburger = document.querySelector(".hamburger");
2 | const navMenu = document.querySelector(".nav-menu");
3 |
4 | hamburger.addEventListener("click", mobileMenu);
5 |
6 | function mobileMenu() {
7 | hamburger.classList.toggle("active");
8 | navMenu.classList.toggle("active");
9 | }
10 |
11 |
12 | // when we click on hamburger icon its close
13 |
14 | const navLink = document.querySelectorAll(".nav-link");
15 |
16 | navLink.forEach(n => n.addEventListener("click", closeMenu));
17 |
18 | function closeMenu() {
19 | hamburger.classList.remove("active");
20 | navMenu.classList.remove("active");
21 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Responsive-Navbar
2 | Responsive Navbar Using HTML, CSS and JAVASCRIPT
3 |
4 | A navbar, short for "navigation bar," is a graphical user interface element used to provide links and navigation to different pages or sections of a website. It typically appears at the top of a webpage and can be fixed, meaning it stays in place as the user scrolls, or static, meaning it scrolls with the page. A well-designed navbar should be easy to use, with clear and descriptive labels, and help users quickly find what they are looking for on a website. It can be created using HTML and styled with CSS to fit the overall design and branding of a website.
5 |
6 | Check this Navbar on server live : https://curiousnavbar.netlify.app
7 |
8 | "Hi there! I wanted to drop a quick message to let you know about my Instagram account. As a coder, I often post about my latest coding projects, and I also share tips and insights for fellow developers.
9 | If you're interested in checking it out, my handle is : https://www.instagram.com/curious_coder_aman/
10 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Responsive Navbar
9 |
10 |
11 |
12 |
13 |
14 |
15 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* css to reset all the designs */
2 |
3 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');
4 |
5 | * {
6 | margin: 0;
7 | padding: 0;
8 | box-sizing: border-box;
9 | }
10 |
11 | html {
12 | font-size: 62.5%;
13 | font-family: 'Roboto', sans-serif;
14 | }
15 |
16 | li {
17 | list-style: none;
18 | }
19 |
20 | a {
21 | text-decoration: none;
22 | }
23 |
24 | /* css to reset all the designs */
25 |
26 | /* add styles on elements */
27 |
28 | .header {
29 | border-bottom: 1px solid #E2E8F0;
30 | background-color: #222;
31 | }
32 |
33 | .navbar {
34 | display: flex;
35 | justify-content: space-between;
36 | align-items: center;
37 | padding: 1.5rem 1.5rem;
38 | }
39 |
40 | .hamburger {
41 | display: none;
42 | }
43 |
44 | .bar {
45 | display: block;
46 | width: 25px;
47 | height: 3px;
48 | margin: 5px auto;
49 | -webkit-transition: all 0.3s ease-in-out;
50 | transition: all 0.3s ease-in-out;
51 | /* background-color: #101010; */
52 | background-color: #fff;
53 | }
54 |
55 | .nav-menu {
56 | display: flex;
57 | justify-content: space-between;
58 | align-items: center;
59 | }
60 |
61 | .nav-item {
62 | margin-left: 5rem;
63 | }
64 |
65 | .nav-link {
66 | /* font-size: 1.6rem; */
67 | font-size: 2rem;
68 | font-weight: 400;
69 | /* color: #475569; */
70 | color: #fff;
71 | /* change */
72 | }
73 |
74 | .nav-link:hover {
75 | color: #482ff7;
76 | }
77 |
78 | .nav-logo {
79 | /* font-size: 2.1rem; */
80 | font-size: 3rem;
81 | font-weight: 500;
82 | /* color: #482ff7; */
83 | color: #fff;
84 | }
85 |
86 | @media only screen and (max-width: 768px) {
87 | .nav-menu {
88 | position: fixed;
89 | left: -100%;
90 | top: 5rem;
91 | flex-direction: column;
92 | /* background-color: #fff; */
93 | background-color: #222;
94 | width: 100%;
95 | border-radius: 10px;
96 | text-align: center;
97 | transition: 0.3s;
98 | box-shadow:
99 | 0 10px 27px rgba(0, 0, 0, 0.05);
100 | }
101 |
102 | .nav-link {
103 | color: #fff;
104 | }
105 |
106 | .nav-menu.active {
107 | left: 0;
108 | }
109 |
110 | .nav-item {
111 | margin: 2.5rem 0;
112 | }
113 |
114 | .hamburger {
115 | display: block;
116 | cursor: pointer;
117 | }
118 |
119 | .hamburger.active .bar:nth-child(2) {
120 | opacity: 0;
121 | }
122 |
123 | .hamburger.active .bar:nth-child(1) {
124 | transform: translateY(8px) rotate(45deg);
125 | }
126 |
127 | .hamburger.active .bar:nth-child(3) {
128 | transform: translateY(-8px) rotate(-45deg);
129 | }
130 |
131 | }
132 |
133 | /* add styles on elements */
--------------------------------------------------------------------------------