Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m

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.

Unlimited Downloads
From $16.50/month

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

Over 9 Million Digital Assets

Everything you need for your next creative project.

Create Beautiful Logos, Designs
& Mockups in Seconds

Design like a professional without Photoshop.

Join the Community

Share ideas. Host meetups. Lead discussions. Collaborate.

Quick LinksExplore popular categories