Position can be used to highlight important information on your website by fixing elements to the page. In this video, see how to update your project to highlight the navigation menu.
- Back in the project.…Let's use the position property to fix…the navigation to the top of the page.…But first, I'm going to add a background color to my nav.…I'm going to make mine white.…Then, I'll add position with the value of fixed,…and I'll also set the top offset property to zero,…and that way the nav will be at the very top of the page.…I'm going to save and refresh my browser to see the changes.…My navigation is fixed at the top of the page now,…and I can see my background of white,…but by default if you don't set…a width to a positioned element,…it will automatically be as wide as its content.…
There's two ways we can fix this.…Let's go back to our CSS file.…One way, is we can set the width to 100%.…And that will make the nav element…span all the way across the page.…Another option is, we can actually set…the left and right value to zero,…and what that will do is set the fixed nav…all the way to the left, zero,…and all the way to the right, zero,…which will also make it span all the way across.…
Both options work fine,…
- Reviewing CSS syntax
- Reviewing simple selectors and attribute selectors
- Using pseudo-class selectors and pseudo-element selectors
- Reviewing the CSS box model
- Adding a menu to your project
- Using float, display, and position
- Debugging CSS
- Resetting stylesheets
- Working with background images
- Exploring a mobile-first approach for responsive web design
- Creating flexible and fluid layouts
Skill Level Beginner
Building Responsive Forms with Flexboxwith James Williamson1h 20m Intermediate
1. CSS Selectors
3. Tips and Tools
4. Responsive and Mobile
- 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.