Skip to main content

WordPress Bulma NavWalker With Font Awesome Support

0

Earlier this year I revamped my WordPress website using Bulma, a CSS Flexbox Framework. I tested a few Navwalkers to integrate the WordPress Nav Menus into the Bulma Navigation. Although they worked they didn’t support Font Awesome.  I embarked on creating my own Bulma Navwalker with the inspiration from my previous Bootstrap Navwalker and GiottoPress.

Features

Prior to using Bulma my original custom bootstrap theme included font awesome by adding the relevant code to the title input box in WordPress Menus. In this Bulma Navwalker, the Font Awesome Classes are added to the CSS Classes input box. Bulma Navwalker also works with font Awesome 5 and you can choose whether to show/hide the anchor titles.

Download Bulma Navwalker

Download Bulma NavWalker

Installation

Drop the file into your WordPress theme folder and hook up to it in your functions.php.

Whilst in functions.php declare a new menu unless it otherwise exists.

Setup the Bulma NavBar and wp_nav_menu in header.php. This demo example uses is-fixed-top and navbar-end from the Bulma CSS Framework. Please consult the documentation for other options Bulma Components – NavBar

Configuration

Font Awesome

It has been tested using version 5 but should work on earlier versions. To add Font Awesome Icons you need to Enqueue the JavasScript in functions.php.

Displaying Font Awesome Icons

Tested on top-level navigation links! Find the icon code snippet from Font Awesome Gallery
Add the snippet into the CSS class input box in  Appearance->Menus

Adding Bulma Classes

Displaying The Title

Add the class fa-show-title to the CSS class input box
Leave it blank if you only want to display the icon.

NavBar Divider

Tested on dropdowns
Add a custom link using # in the URL box
Add the class navbar-divider to the CSS class input box
Add Bulma Divider

Alignment Class

The class is-right is used on the farthest dropdown when using the navbar-end class. It simply aligns the dropdown so that is doesn’t overflow the page. Simply add is-right to the parent element.

Future Features and Bugfixes

Although I have thoroughly tested the NavWalker if you come across any errors or bugs please report any issues.

Topics:

%d bloggers like this: