Fully customizing a Bootstrap 4 navbar's color scheme involves using complex CSS selectors. Look at a commented style sheet that involves changing only a handful of color values. Also, discover a quick trick to calculate the correct value for the inline SVG image that's used for the hamburger icon that toggles the menu on small devices.
- [Narrator] Creating a custom color scheme…for a Bootstrap 4 navbar, involves using…some complex CSS selectors, but once you've defined them,…it's a simple matter of choosing…your background and foreground colors.…If you were following along in the previous video,…select the opening nav tag.…I'll select it in the DOM panel,…then in code view, I can see that what I need to remove…is the inline style for the background color…that I added in the previous video.…So select that, and delete it.…
I also need to get rid of this navbar-dark class,…so select that also, and delete it.…You should be left with just three classes…in the opening nav tag:…navbar, fixed-top, and navbar-expand-lg.…If you're working with a default navbar,…remove the two classes that control…the text and background colors.…By default, they're navbar-light and bg-light.…And in both cases, you should end up with this plain,…unadorned navbar, that looks like this.…
The custom style rules for the navbar…are in a text file called navbar_styles.txt,…which you can find in the exercise files for this video.…
- 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 32m 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.