Last week, we looked at two ways to fix the nav on JWS.app. For the first option, we simply added an additional header that displays when the screen width gets narrow enough. For the second option, we introduced a hamburger menu. This week, let’s look at two new options.
The first of this week’s options uses Bulma. We have looked at Bulma‘s responsive navigation bar once before. Let’s see how it works to implement our JWS.app navbar with it.
See the Pen
JWS.app – Header (After – Option 3) by Joe Steinbring (@steinbring)
on CodePen.
The above example has no custom CSS in it. It simply uses Bulma and it’s CSS classes for styling. This example is pretty close to the original look and feel but it implements a hamburger menu when the screen width calls for it. It is worth noticing that I did add an “onclick” in order to get the hamburger menu to work.
For second option, let’s look at how to implement the navigation using Bootstrap.
See the Pen
JWS.app – Header (After – Option 4) by Joe Steinbring (@steinbring)
on CodePen.
The biggest difference with the above example is that it not only requires the Bootstrap CSS library but it also requires the Bootstrap javascript library and that library requires jQuery. Without the javascript libraries, the hamburger menu doesn’t work.
Have a question, comment, suggestion, etc? Feel free to drop a comment, below.
[ Cover photo by Joseph Barrientos on Unsplash ]