diff --git a/docs/js/custom.js b/docs/js/custom.js
new file mode 100644
index 0000000000000000000000000000000000000000..ba4e8a8440cc44691cdcb826e6282ab18885f26e
--- /dev/null
+++ b/docs/js/custom.js
@@ -0,0 +1,23 @@
+
+// Automatically scroll the navigation menu to the active element
+//   https://github.com/civicrm/civicrm-dev-docs/issues/21
+$.fn.isFullyWithinViewport = function(){
+    var viewport = {};
+    viewport.top = $(window).scrollTop();
+    viewport.bottom = viewport.top + $(window).height();
+    var bounds = {};
+    bounds.top = this.offset().top;
+    bounds.bottom = bounds.top + this.outerHeight();
+    return ( ! (
+      (bounds.top <= viewport.top) ||
+      (bounds.bottom >= viewport.bottom)
+    ) );
+};
+if( !$('li.toctree-l1.current').isFullyWithinViewport() ) {
+  $('.wy-nav-side')
+    .scrollTop(
+      $('li.toctree-l1.current').offset().top -
+      $('.wy-nav-side').offset().top -
+      60
+    );
+}
diff --git a/mkdocs.yml b/mkdocs.yml
index 9eeaf56b866217f20e5961906d942ab0efa9e1d9..2fae3557745881987069e39e67b8830437901195 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -3,6 +3,8 @@ repo_url: https://github.com/civicrm/civicrm-dev-docs
 site_description: A guide for CiviCRM developers.
 site_author: The CiviCRM community
 theme: readthedocs
+extra_javascript:
+  - js/custom.js
 markdown_extensions:
   - markdown.extensions.admonition
 pages: