Creating a Navbar with Icons and Flexbox

In this recipe, we will create a wonderful navbar. It will have large icons as links. The text to describe the icons will be placed below each icon. The icons used will be Font Awesome.

Getting ready

To get ready for this recipe, preview the completed navbar in chapter5/complete/recipe05 folder. Run the hard server and preview the navbar in your browser. Resize the browser window to see the behavior of the navbar. On smaller resolutions, click the toggle menu button to see the positioning of navbar links.

How to do it…

1. Open chapter5/start/main.scss and comment out all the @import statements except the one that pertains to this recipe:

@import "./bower_components/bootstrap/scss/bootstrap.scss";
@import "./bower_components/bootstrap/scss/_mixins.scss";
@import "./bower_components/font-awesome/scss/font-awesome.scss";
@import "./bower_components/hover/scss/hover.scss";

// @import "recipe05-01.scss";
// @import "recipe05-02.scss";
// @import "recipe05...