diff --git a/docs/_sass/highlight.sass b/docs/_sass/highlight.sass
index c12b790e..85285a6f 100644
--- a/docs/_sass/highlight.sass
+++ b/docs/_sass/highlight.sass
@@ -128,4 +128,4 @@
text-align: left
.content li .highlight
- margin: 0
+ margin-top: 0.5em
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 005b3a2e..cb3b4141 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -2987,6 +2987,7 @@ a.box:active {
pointer-events: none;
position: absolute;
transform: rotate(-45deg);
+ transform-origin: center;
width: 0.5em;
margin-top: -0.375em;
right: 1.125em;
@@ -6460,6 +6461,10 @@ a.dropdown-item.is-active {
bottom: 0;
}
+.navbar.is-fixed-bottom.has-shadow {
+ box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1);
+}
+
.navbar.is-fixed-top {
top: 0;
}
@@ -6644,6 +6649,9 @@ a.navbar-item:hover, a.navbar-item.is-active,
.navbar.is-fixed-bottom-touch {
bottom: 0;
}
+ .navbar.is-fixed-bottom-touch.has-shadow {
+ box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1);
+ }
.navbar.is-fixed-top-touch {
top: 0;
}
@@ -6693,6 +6701,17 @@ a.navbar-item:hover, a.navbar-item.is-active,
.navbar-item.has-dropdown {
align-items: stretch;
}
+ .navbar-item.has-dropdown-up .navbar-link::after {
+ transform: rotate(135deg) translate(0.25em, -0.25em);
+ }
+ .navbar-item.has-dropdown-up .navbar-dropdown {
+ border-bottom: 1px solid #dbdbdb;
+ border-radius: 5px 5px 0 0;
+ border-top: none;
+ bottom: 100%;
+ box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1);
+ top: auto;
+ }
.navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
display: block;
}
@@ -6711,6 +6730,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
pointer-events: none;
position: absolute;
transform: rotate(-45deg);
+ transform-origin: center;
width: 0.5em;
margin-top: -0.375em;
right: 1.125em;
@@ -6793,6 +6813,9 @@ a.navbar-item:hover, a.navbar-item.is-active,
.navbar.is-fixed-bottom-desktop {
bottom: 0;
}
+ .navbar.is-fixed-bottom-desktop.has-shadow {
+ box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1);
+ }
.navbar.is-fixed-top-desktop {
top: 0;
}
@@ -9778,7 +9801,7 @@ label.panel-block:hover {
}
.content li .highlight {
- margin: 0;
+ margin-top: 0.5em;
}
.content .highlighter-rouge:not(:last-child) {
diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html
index eb04bd24..257b06ec 100644
--- a/docs/documentation/components/navbar.html
+++ b/docs/documentation/components/navbar.html
@@ -8,7 +8,7 @@ doc-subtab: navbar
{% include subnav-components.html %}
{% capture navbar_example %}
-{% include navbar.html id="bd-example" %}
+{% include examples/navbar.html id="Default" %}
{% endcapture %}
{% capture navbar_brand_example %}
@@ -132,7 +132,7 @@ doc-subtab: navbar
{% endcapture %}
{% capture navbar_transparent_example %}
-{% include navbar.html transparent=true boxed=true id="TransparentExample" %}
+{% include examples/navbar.html transparent=true boxed=true id="TransparentExample" %}
{% endcapture %}
{% capture navbar_dropdown_example %}
@@ -751,6 +751,43 @@ document.addEventListener('DOMContentLoaded', function () {
{% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
+ {% include anchor.html name="Fixed navbar" %}
+
+ {% include elements/new-tag.html version="0.6.1" %}
+
+
+
+ You can now fix the navbar to either the top or bottom of the page. This is a 2-step process:
+
+
+ -
+ Add either
is-fixed-top or is-fixed-bottom to the navbar component
+ {% highlight html %}
+ -
+ Add the corresponding
has-navbar-fixed-top or has-navbar-fixed-bottom modifier to the <html> element to provide the appropriate padding to the page
+ {% highlight html %}{% endhighlight %}
+
+
+
+
+
Try it out!
+
+
+
{% include anchor.html name="Dropdown menu" %}
diff --git a/docs/index.html b/docs/index.html
index 5a9bf28d..8c78dfd5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,7 +4,7 @@ route: index
fixed_navbar: true
---
-{% include navbar.html id="Index" boxed=true fixed=true has_container=true %}
+{% include navbar.html id="Index" fixed=true has_container=true %}
{% include index/intro.html %}
diff --git a/docs/lib/navbar.js b/docs/lib/navbar.js
new file mode 100644
index 00000000..9824dbbb
--- /dev/null
+++ b/docs/lib/navbar.js
@@ -0,0 +1,46 @@
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+
+ var rootEl = document.documentElement;
+ var navbarTopEl = document.getElementById('navbar');
+ var navbarBottomEl = document.getElementById('navbarBottom');
+ var fixTopEl = document.getElementById('navbarFixTop');
+ var fixTopElIcon = fixTopEl.querySelector('.fa');
+ var fixBottomEl = document.getElementById('navbarFixBottom');
+ var fixBottomElIcon = fixBottomEl.querySelector('.fa');
+ var fixedTop = false;
+ var fixedBottom = false;
+
+ fixTopEl.addEventListener('click', function (event) {
+ fixedTop = !fixedTop;
+
+ if (fixedTop) {
+ fixTopEl.className = 'button is-success';
+ fixTopElIcon.className = 'fa fa-check-square-o';
+ rootEl.classList.add('has-navbar-fixed-top');
+ navbarTopEl.classList.add('is-fixed-top', 'has-shadow');
+ } else {
+ fixTopEl.className = 'button is-link';
+ fixTopElIcon.className = 'fa fa-square-o';
+ rootEl.classList.remove('has-navbar-fixed-top');
+ navbarTopEl.classList.remove('is-fixed-top', 'has-shadow');
+ }
+ });
+
+ fixBottomEl.addEventListener('click', function (event) {
+ fixedBottom = !fixedBottom;
+
+ if (fixedBottom) {
+ fixBottomEl.className = 'button is-success';
+ fixBottomElIcon.className = 'fa fa-check-square-o';
+ rootEl.classList.add('has-navbar-fixed-bottom');
+ navbarBottomEl.classList.remove('is-hidden');
+ } else {
+ fixBottomEl.className = 'button is-link';
+ fixBottomElIcon.className = 'fa fa-square-o';
+ rootEl.classList.remove('has-navbar-fixed-bottom');
+ navbarBottomEl.classList.add('is-hidden');
+ }
+ });
+});
\ No newline at end of file
diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index 0c0c5635..790aeba7 100644
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -104,6 +104,8 @@ $navbar-divider-background-color: $border !default
+navbar-fixed
&.is-fixed-bottom
bottom: 0
+ &.has-shadow
+ box-shadow: 0 -2px 3px rgba($black, 0.1)
&.is-fixed-top
top: 0
@@ -216,6 +218,8 @@ a.navbar-item,
+navbar-fixed
&.is-fixed-bottom-touch
bottom: 0
+ &.has-shadow
+ box-shadow: 0 -2px 3px rgba($black, 0.1)
&.is-fixed-top-touch
top: 0
html.has-navbar-fixed-top-touch
@@ -260,6 +264,16 @@ a.navbar-item,
.navbar-item
&.has-dropdown
align-items: stretch
+ &.has-dropdown-up
+ .navbar-link::after
+ transform: rotate(135deg) translate(0.25em, -0.25em)
+ .navbar-dropdown
+ border-bottom: $navbar-dropdown-border-top
+ border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
+ border-top: none
+ bottom: 100%
+ box-shadow: 0 -8px 8px rgba($black, 0.1)
+ top: auto
&.is-active,
&.is-hoverable:hover
.navbar-dropdown
@@ -336,6 +350,8 @@ a.navbar-item,
+navbar-fixed
&.is-fixed-bottom-desktop
bottom: 0
+ &.has-shadow
+ box-shadow: 0 -2px 3px rgba($black, 0.1)
&.is-fixed-top-desktop
top: 0
html.has-navbar-fixed-top-desktop
diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass
index f9ae0acf..23f20626 100644
--- a/sass/utilities/mixins.sass
+++ b/sass/utilities/mixins.sass
@@ -10,6 +10,7 @@
pointer-events: none
position: absolute
transform: rotate(-45deg)
+ transform-origin: center
width: 0.5em
=block