📱Create a Responsive Navbar Using HTML CSS / SASS & JavaScript

How to make a responsive navbar using HTML CSS / SASS & JavaScript

❤ Support me

💙 Support me by PayPal

📁 Assets

🔗 Source code

☝ How to download the project
- Click on the GitHub link
- Click the green button (code)
- Click Download ZIP
- Extract the project to the desired location

👨‍💻 Start project from scratch

🔔 Subscribe for more!

⏱ Timestamps
0:00 Intro Responsive Menu
1:29 Project Setup
2:17 Navbar HTML
7:24Turn on Live Sass
7:36 Variables SCSS
8:55 Reset SCSS
9:28 Reusable Classes
10:56 Navbar SCSS
18:48 Show Hidden Menu
22:14 Change Background Header
23:07 Scroll Sections Active Link
24:40 Breakpoints
28:19 Final Project

🎥 Video how to use Sass in projects

👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤

#responsivenavbar #navigationmenubar #responsivemenu

[tomasferreras]

Amazing tutorial, will you make a react website someday?

[d_starcode]

i have been following your videos fromthe very beginning...i appreciate your work towards the community...can you please make web design course also..that would be great so we can learn to design also...thank your

[juang]

maravilloso diseño del navbar, que maquina eres

[fabriziotofanelli]

this... this.... this is beautiful o.0

[karankavatra]

Could u turn on auto refresh on your live server pls? As you don't explain about properties, I sometimes get confused about some properties. Even if u don't great video anyway keep up the good work

[syedumairali]

Make a full tutorial on a portfolio website using this side menu.

[VaLe-rkdj]

Hey, great content, can i ask you how long have you been a frontend developer, you have enormous experience. And thanks for putting the effort and sharing to the community.

[robertodepasamonte]

Excellent tutorial on responsive navbar. Thank you for sharing. One question -- If one wanted the side menu to "slide over" the page (instead of displacing it to the right), what code modifications would be necessary; besides adding a z-index?

[akato]

how to write in the cases like in portfolio i write my presentation

[parha]

Navigation Bars on Websites should always be Visible.

[GleristonCastro]

What an amazing project, very well organized. I'm doing a number of youtube projects, and yours is very well done. Congratulations!

I would like to contribute with the function scrollActive()

where has scrollYOffset I used scrollY

the reason that is marked as deprecated. And to continue with good practices, I put the constant scrollY with the name scrollDirectionY

function scrollActive(){
const scrollDirectionY = window.scrollY;

sections.forEach(current => {
const sectionHeight = current.offsetHeight;
const sectionTop = current.offsetTop - 58;
const sectionId = current.getAttribute('id');

if(scrollDirectionY > sectionTop && scrollDirectionY <= sectionTop + sectionHeight){
a[href*=' + sectionId +
} else {
a[href*=' + sectionId +
};
});
};

window.addEventListener('scroll', scrollActive);