Chapter 5. Menus and Navigations

In this chapter, we will cover:

• Adding Font Awesome to Bootstrap navbar
• Placing a single Bootstrap navbar dropdown to the right
• Centering navbar links
• Making a transparent navbar on a darker background
• Creating A Navbar with Icons and Flexbox
• Adding another row of links to the navbar
• Adding Yamm3 Megamenu list of links to a navbar dropdown
• Adding Yamm3 Megamenu images to a navbar dropdown

Adding Font Awesome to Bootstrap navbar

In this recipe, we will build a navbar with a dropdown that will hold recipes for the chapter, and two additional links to showcase different navigation scenarios. To see the final result, open the chapter5/complete code's app folder, and run the git bash on it. Follow it up with the harp server command, and navigate to localhost:9000 in your browser to see the result we will achieve in this recipe.

Upon opening the web page as explained in the preceding paragraph, there will be four top-level links, and each of them will have an icon next to it. The second link is a dropdown, whereas the others are regular links.

Getting ready

In this recipe, we are using a customized version of the navbar used on the official Bootstrap 4 site at https://v4-alpha.getbootstrap.com/. Feel free to inspect the home page in developer tools and get yourself acquainted with the structure of the navbar on the site.

How to do it…

1. Open the currently empty file located at chapter5...

Placing a single Bootstrap navbar dropdown to the right

In this recipe, we are also using a customized version of the navbar used on the official Bootstrap 4 website. The navbar is somewhat similar to the one used in the preceding recipe.

Getting ready

In this recipe, we will deal with the drop-down issue for the drop-down bubble (secondary links) in the navbar. Refer to the official documentation regarding dropdowns at https://v4-alpha.getbootstrap.com/components/dropdowns/#menu-alignment.

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-03.scss"; 
// @import "recipe05-04.scss"; 
// @import "recipe05...

Centering navbar links

In this recipe, we continue using a customized version of the navbar used on the official Bootstrap 4 website. However, in each recipe, we also tweak the navbar slightly, thereby making it easier to note the similarities and differences between each recipe, while still working with the exact same links throughout this chapter.

Getting ready

In this recipe, we will be using the flex CSS property to position navbar items. A useful overview of the flex property can be found at https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

How to do it…

1. Comment out all the @import statements except the one that pertains to this recipe, and add the following code to chapter5/start/recipe05-03.scss:

.flex-links {
 flex: auto;
}

2. Open the empty file located at chapter5/start/app/recipe05-03.ejs, and add the following code:

<div class="container">

 <div class="mt-5">
 <h1><%- title %></h1>
 <p><a href="https://v4-alpha.getbootstrap.com/components...

Making a transparent navbar on a darker background

In this recipe, we continue using a customized version of the navbar used on the official Bootstrap 4 website. This recipe will result in a completely different look based on the HTML structure that is almost the same as in the previous recipes in this chapter. To achieve this, we will be relying heavily on SCSS.

Getting ready

To get ready for this recipe, search for the scss folder inside the bower_components/bootstrap folder. We will take some bits and pieces from the code in this folder and override its behavior to get the desired effect.

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...

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...

Adding another row of links to the navbar

In this recipe, we will add an additional list of links above the main links in the navbar and make those additional links smaller. We will add different hover effects to links in the navbar. Finally, we will add underline effects to main links only, using media queries.

Getting ready

To get ready for this recipe, take a look at the drop-down component documentation available at https://v4-alpha.getbootstrap.com/components/dropdowns/. Also, refer to the navbar component documentation at https://v4-alpha.getbootstrap.com/components/navbar/.

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...

Adding Yamm3 Megamenu images to a navbar dropdown

In this recipe, we will add a megamenu list of images to a Bootstrap 4 navbar dropdown, using the Yamm3 library. The library is intended for Bootstrap 3, so we will have to make some adjustments to the code. In other words, we will not be able to plug and play this library. Instead, we will have to customize the HTML structure of the provided example in order to make it work in Bootstrap 4.

Getting ready

To get ready for this recipe, take a look at the drop-down component documentation available at https://v4-alpha.getbootstrap.com/components/dropdowns/. Also, refer to the navbar component documentation at https://v4-alpha.getbootstrap.com/components/navbar/. Finally, visit the address for Yamm3 (yet another megamenu for Bootstrap 3), at https://github.com/geedmo/yamm3.

Note

Alternatively, you could install Yamm3 via bower, using the following command in your console:

bower install yamm3 --save

How to do it…

1. Open chapter5/start/main.scss and...

Adding Yamm3 Megamenu list of links to a navbar dropdown

In this recipe, we will add a megamenu list of links to a Bootstrap 4 navbar dropdown, using the Yamm3 library. Again, like in the previous recipe, we will have to customize the HTML structure of the provided example in order to make it work in Bootstrap 4.

Getting ready

To get ready for this recipe, take a look at the drop-down component documentation available at https://v4-alpha.getbootstrap.com/components/dropdowns/. Also, refer to the navbar component documentation at https://v4-alpha.getbootstrap.com/components/navbar/. Finally, visit the address for Yamm3 (yet another megamenu for Bootstrap 3), at https://github.com/geedmo/yamm3.

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...