This example demonstrates how to shrink a navigation bar when the user starts to scroll the page.

Scroll down this frame to see the effect!

Scroll to the top to remove the effect.

Note: We have also made the navbar responsive, resize the browser window to see the effect.

The text here is from the W3C example. If I use this design and modify it I will make the navbar smaller and style the buttons a little better