Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Modifying the Navigation Area to Accommodate Mobile Devices

  • This lesson is the third of 4 lessons that modify inner.html so it will work as a responsive design to adjust the page layout for mobile devices with smaller screen sizes
  • We will continue to customize CSS rules for the various screen size devices
  • Within the min-width 701px media query:
    • Create a new .mainlinks selector with these properties:
      • Display: inline
    • Create a new li selector with these properties:
      • Padding left and right: 3em
      • Display : inline
    • Create a new nav selector with these properties:
      • Height: 30px
    • Change padding in li rule for left and right to 1em
    • Add a safari proprietary prefix for gradients in the header and nav rules
      • Copy background image code for the header rule
      • Paste it below the present background image
      • Add the safari proprietary code of -webkit- in front of the 2nd background image line
      • Do the same thing for the background image in the nav rule
    • The header and nav rules should have 2 background images listed, one without the proprietary code and the other with webkit proprietary code so the gradient will work in safari browsers
  • Save all and preview the page in the various browsers on your system

Modifying the Navigation Area to Accommodate Mobile Devices

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Hovering Over Selector 0:47
    • Text Transform
  • Create New Main Links Selector for Wider Size 3:57
    • Display Inline
    • Add li Selector
    • Nav for Larger Width
  • Adding Proprietary Prefixes 9:32