Add an option to have a sticky menu

Also added blueprint configuration to turn in on from the admin.
Disabled by default.

Uses https://github.com/bigspotteddog/ScrollToFixed

CHANGELOG.md

@@ -1,6 +1,8 @@
 # v1.x.x
 ## xx/xx/2016
 
+1. [](#new)
+    * Add an option to have a sticky menu. Also added blueprint configuration to turn in on from the admin. Disabled by default. Uses https://github.com/bigspotteddog/ScrollToFixed
 1. [](#improved)
     * Invert order of previous and next button in the blog posts navigation
 1. [](#bugfix)

blueprints.yaml

@@ -11,3 +11,28 @@ demo: http://demo.getgrav.org/deliver-skeleton/
 keywords: deliver, theme, modern, fast, responsive, html5, css3
 bugs: https://github.com/getgrav/grav-theme-deliver/issues
 license: MIT
+
+form:
+  validation: loose
+  fields:
+    dropdown.enabled:
+        type: toggle
+        label: Dropdown in navbar
+        highlight: 1
+        default: 0
+        options:
+          1: PLUGIN_ADMIN.ENABLED
+          0: PLUGIN_ADMIN.DISABLED
+        validate:
+          type: bool
+
+    sticky_menu.enabled:
+        type: toggle
+        label: Sticky menu
+        highlight: 1
+        default: 0
+        options:
+          1: PLUGIN_ADMIN.ENABLED
+          0: PLUGIN_ADMIN.DISABLED
+        validate:
+          type: bool

css-compiled/template.css

@@ -95,7 +95,7 @@ b, strong, label, th {
 
 #header {
   position: absolute;
-  z-index: 10;
+  z-index: 10000;
   width: 100%;
   height: 12rem;
   background-color: rgba(255, 255, 255, 0.9);
@@ -104,6 +104,14 @@ b, strong, label, th {
     height: 50%; }
   #header .fa {
     color: #000; }
+  #header .fixed {
+    background: #fff;
+    padding-left: 14rem;
+    padding-right: 14rem;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%; }
   @media only all and (max-width: 47.938em) {
     #header .logo h3 {
       font-size: 1.9rem; } }

deliver.yaml

@@ -1,3 +1,5 @@
 enabled: true
 dropdown:
   enabled: false
+sticky_menu:
+  enabled: false

js/fixed-header.js

@@ -0,0 +1,15 @@
+$(document).ready(function() {
+    var navbar = $('#navbar');
+    var navbarOffset = navbar.offset().top;
+
+    $(window).scroll(function(){
+        var scroll = $(window).scrollTop();
+
+        if (scroll >= navbarOffset) {
+            navbar.height(navbar.height());
+            navbar.addClass('fixed');
+        } else {
+            navbar.removeClass('fixed');
+        }
+    });
+});

scss/template/_header.scss

@@ -3,7 +3,7 @@
 #header {
     @extend .padding-horiz;
     position: absolute;
-    z-index: 10;
+    z-index: 10000;
     width: 100%;
     height: $header-height;
     background-color: rgba(255,255,255,0.90);
@@ -16,6 +16,16 @@
         color: $black;
     }
 
+    .fixed {
+        background: #fff;
+        padding-left: 14rem;
+        padding-right: 14rem;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+    }
+
     .logo {
         h3 {
             @extend %vertical-align;
@@ -46,7 +56,7 @@
         }
         input::-webkit-search-decoration,
         input::-webkit-search-cancel-button {
-            display: none; 
+            display: none;
         }
         input[type=search] {
             outline: none;
@@ -135,7 +145,7 @@
                     ul ul {
                         left: 100%;
                         top: 0;
-                    }	
+                    }
 
 
                     &:hover {
@@ -172,7 +182,7 @@
                 @include breakpoint(desktop-only) {
                     display: none;
                 }
-            }	
+            }
         }
 
         .panel-activation {
@@ -275,4 +285,4 @@
             }
         }
     }
-}
+}

templates/partials/base.html.twig

@@ -33,6 +33,10 @@
         {% do assets.addJs('theme://js/deliver.js') %}
         {% do assets.addJs('theme://js/slidebars.min.js') %}
         {% do assets.addJs('theme://js/jquery.slideme2.js') %}
+        {% if theme_config.sticky_menu.enabled %}
+            {% do assets.addJs('theme://js/jquery-scrolltofixed-min.js') %}
+            {% do assets.addJs('theme://js/fixed-header.js') %}
+        {% endif %}
     {% endblock %}
     {{ assets.js() }}