Create a responsive Bootstrap layout in Dreamweaver — Part 5

Create navigation using the Bootstrap Basic Navbar

  1. Open your template file.
  2. Switch to Live view, and then click Split.
  3. Locate the <nav class="row"> tag in the code.
  4. Select the <div class="col-sm-12">Insert navigation here</div> code between the opening <nav class="row"> and the closing </nav> tag.

    Div selected within the nav row
  5. Right-click the selected code, and then click Cut.
  6. Make sure there's blank line between the opening <nav class="row"> tag and closing </nav> tag, and make sure the cursor appears inside the blank line in the code portion of Split view.
  7. On the Insert menu, point to Bootstrap Components, point to Navbar, and then click Basic Navbar.
  8. With the newly inserted code still selected, double-check that it appears between the previous <nav class="row"> tag and the previous </nav> tag. If the new navigation code appears anywhere else, cut the new code, click immediately after the <nav class="row"> tag, and then paste the code in the correct position.
  9. Save your work, and update the pages based on the template.
  10. If you're prompted to update the Bootstrap components at this point, click Yes.
  11. If you're prompted to copy dependent files for the Bootstrap components, click OK.
  12. When prompted to update the pages based on your the inserted navbar, click Update.
  13. Click Close once the pages based on the template have updated.
  14. On the File menu, click Save All.

Set the new Bootstrap Basic Navbar to use the proper Bootstrap class

Sometimes the new code inserted from the Bootstrap Basic Navbar doesn't insert the class needed to make the new navigation code format correctly. Fortunately, we can simply add a class to the newly inserted <nav> element to fix the problem.

To insert the correct class into the new <nav> element

  1. Go to Split view, and then look for the second opening <nav> tag. It will likely be somewhere around line 34 and will NOT be the one with class="row".

    New nav element inserted with the basic navbar
  2. Do one of the following:

When you're finished adding the correct class, your code should resemble the following image:

After adding the proper class to the second opening <nav> tag 

Remove unneeded components from the Basic Navbar

As you're working on your own site, you will discover that you won't need all the components of the Bootstrap navigation. The entries below are items we covered in class as a demonstration to show how to delete individual components. You don't have to delete the same items listed below. For instance, in your own site, if you want to keep the dropdown navigation, you're welcome to do so.

To delete the Dropdown on the right side of the navbar

  1. Make sure your template file is still open in Live view and Split view.
  2. In the Live view pane, click the word Dropdown on the far right side of the navbar.

    Right side dropdown navigation
  3. In the tag list, click ul.nav.navbar-nav.navbar-right, which will cause several lines of text to appear selected in the code pane.

    Right side dropdown code
  4. Right-click the selected code, and then click Cut.

To delete the search box in the middle of the navbar

  1. In the Live view pane, click the Search box in the middle of the navbar.

    Search box and Submit button
  2. In the tag list, click form.navbar-form-navbar-left.

    Search box and Submit button code
  3. Right-click the selected code, and then click Cut.

To delete Brand on the right side of the screen

  1. In the Live view pane, click the word Brand on the far left side of the navbar.

    Brand on navigation bar
  2. In the tag list, click a.navbar-brand.

    Brand code
  3. Right-click the selected code, and then click Cut.

To delete the Dropdown entry (if desired)

  1. In the Live view pane, click the word Dropdown.

    Dropdown entry in the navigation bar
  2. In the tag list, click li.dropdown -or- li.dropdown.open.

    Dropdown code selected
  3. Right-click the selected code, and then click Cut.

Note: If you think you might ever use the dropdown code, consider creating a new HTML document in Dreamweaver (on the File menu, click New, and then click New Document, with a Document Type of HTML, and a Framework of None). Delete all the existing code in the new page, and then paste the dropdown code you just cut into the new page. This way, you have all the code necessary to put the dropdown back in if you change your mind.

To delete the active class and <span> from the first list item

  1. In the Live view pane, click the first instance of the word Link.

    First Link on navigation bar
  2. In the taglist, click li.active.
  3. In the selected code, delete the words class="active".

    First Link with the active class selected
  4. In the same line, delete <span class="sr-only">(current)</span>.

    First Link with the span selected
  5. Confirm that the only remaining text on the line reads <li><a href="#">Link</a></li>.
  6. In the Live view pane, click the first instance of Link again.
  7. If you want to remove all the extra spaces left from cutting parts of the code, click anywhere within the code, and then do one of the following:
  8. Save your work, and update the pages based on the template.

Create navigation links for the template

  1. Make sure you have followed the procedure for creating pages from a template and have created several pages for your site.
  2. Make sure your template file is open in Split view.
  3. Locate the first instance of <li><a href="#">Link</a></li>, select the list item code, and then press Ctrl+C (or Command+C for Mac) to copy the code to the clipboard.
  4. In the same line of code, change the word Link to Home.
  5. On the next line of code, change the word Link to one of the page names in your project.
  6. Before the final closing </ul> tag, press Enter to insert a line.
  7. In the blank line, press Ctrl+V (Mac: Command+V) to insert a copy of the list item text from step 3 above.
  8. In the pasted code, change the word Link to another page name from your site.
  9. If you need an additional entry, press Enter after the newly inserted line of code, and then press Ctrl+V (or Command+V), and change the word Link to a relevant page name for your site.
  10. Repeat the process until you have all the needed navigation entries for your site.
  11. Save your template, and update all the pages based on the template.

Link the navigation to the pages built from the template

  1. Make sure your template file is open in Split view.
  2. Click inside the Home entry in the navigation code. You don't need to select the text, which may be hard to do in Design view anyway.
  3. In the Property inspector, delete the number sign inside the Link box, and then click the Browse for File button Browse for File button next to the Link box.
  4. In the Select File dialog box, click the Site Root button, click the index.html file, and then click OK.
  5. Repeat these steps for every item in the toolbar that you want to link to a page based off the template.
  6. Save your work, and then update all the pages based on the template.
  7. Consider opening the lorem.html page, previewing the page in a browser, and then clicking through the navigation to make sure everything works as expected.

Style the navigation

To create the background for the navigation area

  1. Open any page of your site in Live view.
  2. In the CSS Designer panel, under Sources, click your style sheet file.
  3. Under @Media, click GLOBAL.
  4. Under Selectors, click the body style.
  5. Next to Selectors, click the Add Selector button Add Selector button.
  6. Make sure the selector name box reads nav.row nav.navbar-default.
  7. In the CSS Designer panel, under Properties, click the Background button Background button.
  8. In the background-color box, type or select a color for the navigation background.

    Note Use a color from your color scheme for this background color.

To style the links

  1. In the CSS Designer panel, under Sources, click your style sheet file.
  2. Under @Media, click GLOBAL.
  3. Under Selectors, make sure nav.row nav.navbar-default is selected.
  4. Next to Selectors, click the Add Selector button Add Selector button.
  5. Make sure the selector name box reads nav.row ul.nav.navbar-nav a:link, ul.nav.navbar-nav a:visited.

    Note Feel free to copy and paste the bolded part of step 5 and paste it into the selector name box.
  6. In the CSS Designer panel, under Properties, click the Text button Text button.
  7. In the color box, type or select a color for the navigation text.
  8. In the property box, type transition, and then in the value box, type .5s.

    Note: If you'd prefer not to use a transition when users point to the navigation text, you can omit this step. If you'd like to shorten or lengthen the transition, adjust the number part of the s (which stands for second) value.

To set the hover style for the navigation

  1. In the CSS Designer panel, under Sources, click your style sheet file.
  2. Under @Media, click GLOBAL.
  3. Under Selectors, click the nav.row ul.nav.navbar-nav a:link, ul.nav.navbar-nav a:visited rule.

    Note: The hover rule must appear underneath this rule for the links to style correctly.
  4. Under Selectors, click the Add Selector button Add Selector button.
  5. Change the name in the selector name box to read nav.row ul.nav.navbar-nav a:hover.
  6. In the CSS Designer panel, under Properties, click the Background button Background button.
  7. In the background-color box, type or select a color that will appear when a user hovers over the navigation text.
  8. In the CSS Designer panel, under Properties, click the Text button Text button.
  9. In the color box, type or select a color that contrasts well with the color you picked in the previous step.

    Note: Remember that black is #000 and white is #fff.
  10. On the File menu, click Save All.
  11. Open your lorem.html file, and then test the hover either in Live view or in a web browser.

(Optional) To center the navigation bar

  1. In the CSS Designer panel, under Sources, click your style sheet file.
  2. Under @Media, click GLOBAL.
  3. Under Selectors, click the body rule.
  4. Under Selectors, click the Add Selector button Add Selector button.
  5. Change the name in the selector name box to read .nav.navbar-nav.
  6. In the CSS Designer panel, under Properties, click the Layout button Layout button.
  7. Set the width to 715px.
  8. Set the margin-left to auto.
  9. Set the margin-right to auto.
  10. Set the float to none.

You'll have to keep adjusting the width until you come up with a value that makes the navigation appear centered. The best approach is to click the 768px media query, and then in the CSS Designer panel, use the slider function where you point to the width and then drag your pointer to the left or to the right until the navigation looks centered. It's easier to "eyeball" the width at smaller screen sizes.

(Optional) To add borders between the navigation entries

  1. In the CSS Designer, return to the nav.row ul.nav.navbar-nav a:link, ul.nav.navbar-nav a:visited rule.
  2. In the CSS Designer panel, under Properties, click the Border button Border button.
  3. Under border, click the Left button Left border button.
  4. In the width, style, and color boxes, set an appropriate left border, such as 1px solid #fff.
  5. In the CSS Designer panel, under Selectors, select the nav.navbar-default rule.
  6. Under Selectors, click the Add Selector button Add Selector button.
  7. Change the name in the selector name box to read nav.row ul.nav.navbar-nav li:first-child.
  8. In the CSS Designer panel, under Properties, click the Border button Border button.
  9. Under border, click the Right button Right border button.
  10. In the width, style, and color boxes, set a right border that matches the left border inserted earlier, such as 1px solid #fff.

(Optional) To round off the navigation bar

  1. In the CSS Designer, return to the nav.row nav.navbar-default rule.
  2. In the CSS Designer panel, under Properties, click the Border button Border button.
  3. In the border-radius box, type a value for the radius, such as 5px.

(Optional) To fix blank text issue on the drop-down menu

  1. In the CSS Designer, select the nav.row ul.nav.navbar-nav a:hover rule.
  2. Under Selectors, click the Add Selector button Add Selector button.
  3. Change the name in the selector name box to read nav.row .navbar-default ul ul a.
  4. In the CSS Designer panel, under Properties, click the Text button Text button.
  5. In the color box, type or select a color, such as #000, that works against the menu background color.

(Optional) To add a slight transparency to the drop-down menu background

  1. In the CSS Designer, select the nav.row ul.nav.navbar-nav a:hover rule.
  2. Under Selectors, click the Add Selector button Add Selector button.
  3. Change the name in the selector name box to read nav.row .navbar-default ul ul.
  4. In the CSS Designer panel, under Properties, click the Background button Background button.
  5. In the background-color box, type the following: rgba(255,255,255,0.9), and then press Enter.