Envato Elements: Unlimited templates, graphics, courses, eBooks, and now 300,000 photos! Unlimited courses, eBooks, graphics + photos Only $29/month

Build a Shrinking Navbar With CSS3 and JavaScript

by Adi Purdila30 Nov 2016

Lessons:2Length:12 minutes

CSS CSS3 JavaScript jQuery

Turn Autoplay Off

Next lesson playing in 5 seconds

Free Preview: Build a Shrinking Navbar With CSS3 and JavaScript

Introduction

00:37

In this quick, ten-minute Coffee Break Course, you're going to learn how to create a navbar that shrinks and changes its logo when you scroll. We'll be using CSS and JavaScript to achieve this effect.

We've built a comprehensive guide to help you learn CSS online, whether you're just getting started with the basics or you want to explore more advanced CSS. Check out Learn CSS: The Complete Guide.

Do you want to learn the JavaScript you need to be a successful web designer? Check out our course JavaScript for Web Designers.

1.Build a Shrinking Navbar With CSS3 and JavaScript
2 lessons, 11:36

Free Lesson

1.1
Introduction
00:37

1.2
The Build
10:59

Iign1n2b

Photoshop, HTML, CSS? Yep, that's what I do best. Mix that with lots of head nodding from trance music and you've got me in a nutshell.

Elements

Unlimited Downloads
Only $29/month

Get access to over 18,000 creative assets on Envato Elements.

Market

Over 9 Million Digital Assets

Everything you need for your next creative project.

Studio

Hire a Freelancer

Choose from 2,000 professionals ready to do the work for you.

Community

Join the Community

Share ideas. Host meetups. Lead discussions. Collaborate.