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
pull/24/head
Flavio Copes 6 years ago
parent 6ff958bf2f
commit ef8b17e040
  1. 2
      CHANGELOG.md
  2. 25
      blueprints.yaml
  3. 10
      css-compiled/template.css
  4. 2
      css-compiled/template.css.map
  5. 2
      deliver.yaml
  6. 15
      js/fixed-header.js
  7. 1
      js/jquery-scrolltofixed-min.js
  8. 20
      scss/template/_header.scss
  9. 4
      templates/partials/base.html.twig

@ -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)

@ -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

@ -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; } }

File diff suppressed because one or more lines are too long

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

@ -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');
}
});
});

File diff suppressed because one or more lines are too long

@ -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 @@
}
}
}
}
}

@ -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() }}

Loading…
Cancel
Save