The navbar plugin provides a range of different functionality for the Bulma navbar. By simply including the plugin you'll get the mobile navigation functionality, no configuration is required.
An example of this plugin is being used on this documentation!
Since 0.6.1 Bulma has provided a is-fixed-top
class for the navbar, along with has-navbar-fixed-top
for the html/body elements. This allows you to fix the navbar to the top of the page when scrolling. However, what if your navbar is not directly at the top? You need to be able to offset the sticky feature.
Since 0.7.0
BulmaJS has provided the functionality to do just this! First, specify the data-sticky
attribute on your navbar. This will enable the event listener for scroll, by default the offset is set to 0
which does nothing extra than just adding the class to the element.
You can control the offset of the navbar using data-sticky-offset
this access a number and is the number of pixels the user needs to scroll before the navbar sticks to the top.
You can also add data-sticky-shadow
to your navbar element, this will add the has-shadow
class to the navbar when it becomes sticky.
It can sometimes be useful to hide the navbar when your user is scrolling down, and then show it again when scrolling up. As of 0.7.0
the navbar plugin provides this functionality. To enable it, add the data-hide-on-scroll
attribute to your navbar element. Do note this also needs data-sticky
to be enabled as well.
You can specify the tolerance
before the navbar is hidden/shown by adding a data-tolerance
attribute. This accepts an integer and is the number of pixels between each scroll event. I.e. the 'force' required to hide/show the navbar.
When the navbar is hidden the is-hidden-scroll
class is added to it, allowing you to detect this via CSS and hide the navbar. This also allows you to add CSS animations. An example implemention would be:
In 0.10.2 a new offset option was introduced hide-offset
. This will prevent the navbar from hiding until the user has scrolled past that offset.
.navbar {
transform: translateY(0);
transition: transform 0.2s ease-in-out;
}
.navbar.is-hidden-scroll {
transform: translateY(-100%);
}