Skip to content

Commit 3175662

Browse files
AnshMeshramAnshMeshram
committed
Add Responsive Navbar
1 parent 0d97158 commit 3175662

13 files changed

Lines changed: 639 additions & 0 deletions

File tree

‎responsive-bottom-navigation-main/responsive-bottom-navigation-main/README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Responsive Bottom Navigation Bar
2+
## [Watch it on youtube]()
3+
### Responsive Bottom Navigation Bar
4+
5+
- Lower navigation bar using HTML, CSS and JavaScript.
6+
- First design with labels in the navigation bar.
7+
- Second design with points in the navigation bar.
8+
- Smooth scrolling in each section.
9+
- Developed first with the Mobile First methodology, then for desktop.
10+
- Compatible with all mobile devices and with a beautiful and pleasant user interface.
11+
12+
Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/c/Bedimcode)
13+
14+
![responsive bottom navigation](/preview.png)

‎responsive-bottom-navigation-main/responsive-bottom-navigation-main/assets/css/styles.css‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
/*=============== GOOGLE FONTS ===============*/
2+
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");
3+
4+
/*=============== VARIABLES CSS ===============*/
5+
:root {
6+
--header-height: 3rem;
7+
8+
/*========== Colors ==========*/
9+
--hue: 174;
10+
--sat: 63%;
11+
--first-color: hsl(var(--hue), var(--sat), 40%);
12+
--first-color-alt: hsl(var(--hue), var(--sat), 36%);
13+
--title-color: hsl(var(--hue), 12%, 15%);
14+
--text-color: hsl(var(--hue), 8%, 35%);
15+
--body-color: hsl(var(--hue), 100%, 99%);
16+
--container-color: #FFF;
17+
18+
/*========== Font and typography ==========*/
19+
--body-font: 'Open Sans', sans-serif;
20+
--h1-font-size: 1.5rem;
21+
--normal-font-size: .938rem;
22+
--tiny-font-size: .625rem;
23+
24+
/*========== z index ==========*/
25+
--z-tooltip: 10;
26+
--z-fixed: 100;
27+
}
28+
29+
@media screen and (min-width: 968px) {
30+
:root {
31+
--h1-font-size: 2.25rem;
32+
--normal-font-size: 1rem;
33+
}
34+
}
35+
36+
/*=============== BASE ===============*/
37+
* {
38+
box-sizing: border-box;
39+
padding: 0;
40+
margin: 0;
41+
}
42+
43+
html {
44+
scroll-behavior: smooth;
45+
}
46+
47+
body {
48+
margin: var(--header-height) 0 0 0;
49+
font-family: var(--body-font);
50+
font-size: var(--normal-font-size);
51+
background-color: var(--body-color);
52+
color: var(--text-color);
53+
}
54+
55+
ul {
56+
list-style: none;
57+
}
58+
59+
a {
60+
text-decoration: none;
61+
}
62+
63+
img {
64+
max-width: 100%;
65+
height: auto;
66+
}
67+
68+
/*=============== REUSABLE CSS CLASSES ===============*/
69+
.section {
70+
padding: 4.5rem 0 2rem;
71+
}
72+
73+
.section__title {
74+
font-size: var(--h1-font-size);
75+
color: var(--title-color);
76+
text-align: center;
77+
margin-bottom: 1.5rem;
78+
}
79+
80+
.section__height {
81+
height: 100vh;
82+
}
83+
84+
/*=============== LAYOUT ===============*/
85+
.container {
86+
max-width: 968px;
87+
margin-left: 1rem;
88+
margin-right: 1rem;
89+
}
90+
91+
/*=============== HEADER ===============*/
92+
.header {
93+
position: fixed;
94+
top: 0;
95+
left: 0;
96+
width: 100%;
97+
background-color: var(--container-color);
98+
z-index: var(--z-fixed);
99+
transition: .4s;
100+
}
101+
102+
/*=============== NAV ===============*/
103+
.nav {
104+
height: var(--header-height);
105+
display: flex;
106+
justify-content: space-between;
107+
align-items: center;
108+
}
109+
110+
.nav__img {
111+
width: 32px;
112+
border-radius: 50%;
113+
}
114+
115+
.nav__logo {
116+
color: var(--title-color);
117+
font-weight: 600;
118+
}
119+
120+
@media screen and (max-width: 767px) {
121+
.nav__menu {
122+
position: fixed;
123+
bottom: 0;
124+
left: 0;
125+
background-color: var(--container-color);
126+
box-shadow: 0 -1px 12px hsla(var(--hue), var(--sat), 15%, 0.15);
127+
width: 100%;
128+
height: 4rem;
129+
padding: 0 1rem;
130+
display: grid;
131+
align-content: center;
132+
border-radius: 1.25rem 1.25rem 0 0;
133+
transition: .4s;
134+
}
135+
}
136+
137+
.nav__list,
138+
.nav__link {
139+
display: flex;
140+
}
141+
142+
.nav__link {
143+
flex-direction: column;
144+
align-items: center;
145+
row-gap: 4px;
146+
color: var(--title-color);
147+
font-weight: 600;
148+
}
149+
150+
.nav__list {
151+
justify-content: space-around;
152+
}
153+
154+
.nav__name {
155+
font-size: var(--tiny-font-size);
156+
/* display: none;*/ /* Minimalist design, hidden labels */
157+
}
158+
159+
.nav__icon {
160+
font-size: 1.5rem;
161+
}
162+
163+
/*Active link*/
164+
.active-link {
165+
position: relative;
166+
color: var(--first-color);
167+
transition: .3s;
168+
}
169+
170+
/* Minimalist design, active link */
171+
/* .active-link::before{
172+
content: '';
173+
position: absolute;
174+
bottom: -.5rem;
175+
width: 4px;
176+
height: 4px;
177+
background-color: var(--first-color);
178+
border-radius: 50%;
179+
} */
180+
181+
/* Change background header */
182+
.scroll-header {
183+
box-shadow: 0 1px 12px hsla(var(--hue), var(--sat), 15%, 0.15);
184+
}
185+
186+
/*=============== MEDIA QUERIES ===============*/
187+
/* For small devices */
188+
/* Remove if you choose, the minimalist design */
189+
@media screen and (max-width: 320px) {
190+
.nav__name {
191+
display: none;
192+
}
193+
}
194+
195+
/* For medium devices */
196+
@media screen and (min-width: 576px) {
197+
.nav__list {
198+
justify-content: center;
199+
column-gap: 3rem;
200+
}
201+
}
202+
203+
@media screen and (min-width: 767px) {
204+
body {
205+
margin: 0;
206+
}
207+
.section {
208+
padding: 7rem 0 2rem;
209+
}
210+
.nav {
211+
height: calc(var(--header-height) + 1.5rem); /* 4.5rem */
212+
}
213+
.nav__img {
214+
display: none;
215+
}
216+
.nav__icon {
217+
display: none;
218+
}
219+
.nav__name {
220+
font-size: var(--normal-font-size);
221+
/* display: block; */ /* Minimalist design, visible labels */
222+
}
223+
.nav__link:hover {
224+
color: var(--first-color);
225+
}
226+
227+
/* First design, remove if you choose the minimalist design */
228+
.active-link::before {
229+
content: '';
230+
position: absolute;
231+
bottom: -.75rem;
232+
width: 4px;
233+
height: 4px;
234+
background-color: var(--first-color);
235+
border-radius: 50%;
236+
}
237+
238+
/* Minimalist design */
239+
/* .active-link::before{
240+
bottom: -.75rem;
241+
} */
242+
}
243+
244+
/* For large devices */
245+
@media screen and (min-width: 1024px) {
246+
.container {
247+
margin-left: auto;
248+
margin-right: auto;
249+
}
250+
}

‎responsive-bottom-navigation-main/responsive-bottom-navigation-main/assets/img/perfil.png‎

38.8 KB
Loading

‎responsive-bottom-navigation-main/responsive-bottom-navigation-main/assets/js/main.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
2+
const sections = document.querySelectorAll('section[id]')
3+
4+
function scrollActive(){
5+
const scrollY = window.pageYOffset
6+
7+
sections.forEach(current =>{
8+
const sectionHeight = current.offsetHeight,
9+
sectionTop = current.offsetTop - 50,
10+
sectionId = current.getAttribute('id')
11+
12+
if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
13+
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link')
14+
}else{
15+
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link')
16+
}
17+
})
18+
}
19+
window.addEventListener('scroll', scrollActive)
20+
21+
22+
/*=============== CHANGE BACKGROUND HEADER ===============*/
23+
function scrollHeader(){
24+
const header = document.getElementById('header')
25+
// When the scroll is greater than 80 viewport height, add the scroll-header class to the header tag
26+
if(this.scrollY >= 80) header.classList.add('scroll-header'); else header.classList.remove('scroll-header')
27+
}
28+
window.addEventListener('scroll', scrollHeader)

‎responsive-bottom-navigation-main/responsive-bottom-navigation-main/assets/scss/base/_base.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/*=============== BASE ===============*/
2+
*{
3+
box-sizing: border-box;
4+
padding: 0;
5+
margin: 0;
6+
}
7+
8+
html{
9+
scroll-behavior: smooth;
10+
}
11+
12+
body{
13+
margin: var(--header-height) 0 0 0;
14+
font-family: var(--body-font);
15+
font-size: var(--normal-font-size);
16+
background-color: var(--body-color);
17+
color: var(--text-color);
18+
}
19+
20+
ul{
21+
list-style: none;
22+
}
23+
a{
24+
text-decoration: none;
25+
}
26+
img{
27+
max-width: 100%;
28+
height: auto;
29+
}

0 commit comments

Comments
 (0)