From 765ea4a1a1270dcb831a26e27766a27e6c848f91 Mon Sep 17 00:00:00 2001
From: Graham Triggs <gtriggs@duraspace.org>
Date: Sat, 23 Sep 2017 00:11:29 +0100
Subject: [PATCH] Smoother scrolling nav bar

---
 .../templates/page/partials/headScripts.ftl   |  2 +
 .../templates/page/partials/menu.ftl          | 46 ++++++++++---------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
index b9d32d7c..33e01c47 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
@@ -18,6 +18,8 @@ var i18nStrings = {
 <script src="${urls.theme}/bootstrap/js/bootstrap.min.js"></script>
 <script type="text/javascript">
 	$(document).ready(function(){
+        $('#nav-wrapper').height($("#nav").height());
+
 		$('#nav').affix({
 			offset: {
 				top: $('header').height()
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/menu.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/menu.ftl
index 41a3bea9..14c611c8 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/menu.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/menu.ftl
@@ -1,26 +1,28 @@
 <#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
 
-<div id="nav">
-    <div class="container">
-        <nav class="navbar navbar-default">
-            <p class="navbar-text visible-xs-inline-block">Menu</p>
-            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarContent">
-                <ul id="main-nav" role="list" class="nav navbar-nav mr-auto mt-2 mt-md-0">
-                <#list menu.items as item>
-                    <li class="nav-item" role="listitem" <#if item.active> class="active" </#if>><a href="${item.url}" title="${item.linkText} ${i18n().menu_item}" class="nav-link">${item.linkText}</a></li>
-                </#list>
-                </ul>
-                <ul class="nav pull-right navbar-nav">
-                    <li>
-                    <#include "search.ftl">
-                    </li>
-                </ul>
-        </nav>
+<div id="nav-wrapper">
+    <div id="nav" data-spy="affix">
+        <div class="container">
+            <nav class="navbar navbar-default">
+                <p class="navbar-text visible-xs-inline-block">Menu</p>
+                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarContent">
+                    <ul id="main-nav" role="list" class="nav navbar-nav mr-auto mt-2 mt-md-0">
+                    <#list menu.items as item>
+                        <li class="nav-item" role="listitem" <#if item.active> class="active" </#if>><a href="${item.url}" title="${item.linkText} ${i18n().menu_item}" class="nav-link">${item.linkText}</a></li>
+                    </#list>
+                    </ul>
+                    <ul class="nav pull-right navbar-nav">
+                        <li>
+                        <#include "search.ftl">
+                        </li>
+                    </ul>
+            </nav>
+        </div>
     </div>
 </div>