Bulma Navigation: What the documentation is missing

Lately, I have been playing around with Bulma.  It is a CSS framework based on Flexbox.  It is similar to Bootstrap but it does not have a javascript component to it.  One of the first things that I wanted to figure out was the responsive horizontal nav bar.  Unfortunately, the example within the official Bulma documentation does not fully function and does not describe it completely. After a little poking, I figured it out, though.

There are two big differences between the above example and the one within the Bulma documentation. The Bulma documentation doesn’t specify that the nav-toggle span only handles display of the hamburger menu icon. It also doesn’t mention that you need to apply the is-active class to the nav-menu div in order to open it. This means that you need one bit of javascript in order to toggle the class. You will find that within the onclick attribute of the nav-toggle span within my example.

Have a question, comment, or suggestion on how to do this better? Please feel free to drop a comment below.

2 thoughts on “Bulma Navigation: What the documentation is missing

  1. Can’t seem to find out how to implement your example, a much more concise explanation of what to add and remove is needed thanks

Leave a Reply

Your email address will not be published. Required fields are marked *