Join David Powers for an in-depth discussion in this video Styling the navigation bar, part of Dreamweaver CC 2015: Responsive Design with Bootstrap.
- We've edited the navbar,…but I don't know about you but to me…it looks pretty gray and uninspiring.…There are two ways to style a Bootstrap navbar.…The hard way and the easy way using…an online style generator.…Guess which I'm going to use?…Yep, right first time.…It's that online style generator.…So let's switch to that.…It's this site, TWBSColor.…TWBS, Twitter Boostrap.…And all we need to do is to scroll down,…and here you select your colors.…
The default background, the active background,…the default color for text, and the active color for text.…So just click the first swatch for default background,…and instead of this purple,…the color that I'm going to use is #,…4896AA…then just click choose,…and we can see what it's beginning to look like.…So the active background, click that.…And have a slightly different color of aqua.…
It'll be 346F...…7e.…Click choose.…That's beginning to look a lot better.…I'm quite happy with the default color for text,…but I don't like the active color,…I don't like that pink.…So I'm going to click that active color…
- Defining a custom Bootstrap layout grid
- Inserting and modifying a navigation bar
- Adding a container for a hero image
- Working with columns inside a Bootstrap container
- Creating placeholder content with Emmet
- Speeding up layout by duplicating columns
- Moving page elements in the DOM
- Previewing the mobile webpage with Device Preview
Skill Level Appropriate for all
1. Getting Started
2. Creating the Site Navigation
3. Adding a Hero Image
Inserting the hero image6m 37s
4. Working with Columns
5. Using Device Preview
What next?2m 5s
- 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.