How to Create a Scrolling “Sticky” Header

Use this simple child theme modification to add a sticky scrolling effect to your site’s header. This is a simple solution that requires no jQuery and uses MD’s extremely lightweight JavaScript API to make this simple effect possible on your website.

The Sticky Header feature is slated to make it into a future MD release, but for now this simple effect can be achieved with the above code snippets in your child theme.

With a few extra custom CSS styles, the sticky effect is made more elegant by narrowing the height of the header and reducing the font size of the site title to prevent the header from blocking too much content while scrolling.

Leave a Comment