It's important to understand the underlying HTML in a Bootstrap navigation bar to avoid deleting classes and elements designed to enhance usability, particularly for screen readers for the visually impaired. In this video, learn how to edit the navigation links quickly and efficiently using a combination of Live View, the DOM panel, and Code view.
- [Instructor] We've stripped unwanted elements…out of the Navbar and are ready to begin…editing the links.…Now, although you can edit the links…of a Navbar in Live View,…it's much quicker and more accurate…to work in Split View.…Using Live View to identify the link…you want to edit, then editing…the underlying HTML in Code View.…This avoids accidentally deleting classes…and other elements of the Navbar component.…I want to begin by editing this Navbar text here.…So, select that in Live View,…and in Code View, the insertion point…is in that work Navbar, we can select it…and replace it with the name of the site.…
This site is called Yosemite.…Of course, you could also put a logo in here.…And it's common practice to use the site name,…or logo to link back to the homepage.…So, we needto change this href attribute…from a hash to index.html.…And Code Hints recognize the names…of all the folders and files…that you've got in the site.…So, index.html comes up, just press enter or return…and that will automatically complete it.…
- Defining a layout grid
- Inserting and modifying a navigation bar
- Adding a container for the page content
- Inserting a responsive image
- Resizing and duplicating columns
- Inserting fixed-size images
- Inserting cards
- Editing a carousel
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
Bootstrap 4 Essential Trainingwith Ray Villalobos6h 42m Beginner
Bootstrap 4 Layouts: Responsive Single-Page Designwith Ray Villalobos3h 13m Intermediate
Designing Websites from Photoshop to Dreamweaverwith Sue Jenkins2h 27m Intermediate
What you should know1m 46s
1. Get Started
2. Create the Site Navigation
3. Add a Hero Image
4. Work with Rows and Columns
5. Edit Bootstrap Components
6. Complete the Design
Next steps1m 55s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.