Configuring the navbar

In this section, we'll set up the navbar items for our site pages, and we'll also go ahead and add the markup for our icons:

  1. In your WordPress Dashboard, navigate to Appearance | Menus.
    Configuring the navbar
  2. Remove the Sample Page menu item from the menu.
  3. Edit the Home menu item by adding the markup for our Font Awesome icon to the label area using the same markup from our Chapter 2, Bootstrappin' Your Portfolio, index.html file shown as follows:
    <span class="icon fa fa-home"></span> Home
    Configuring the navbar
  4. Now create the remainder of your pages—for now, you could do so by creating simple custom links—using the appropriate markup as the label for each page.
    Configuring the navbar
  5. The Link Text fields for each menu item are as follows:
    <span class="icon fa fa-desktop"></span> Portfolio
<span class="icon fa fa-group"></span> Team
<span class="icon fa fa-envelope"></span> Contact
  6. After adding each one to its menu, save the menu.

    Note

    Recall that our Font Awesome icons are not yet available. Bootstrap does not provide them by default, and neither does the Roots theme. So, our icons will not appear until we supply our new site assets in a later step ahead.

  7. Now go ahead and refresh the home page and you will see the link text appear.
    Configuring the navbar

It's now time to put our home page content in place.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset