Navigation Lists Next, youll design the layout for the mobile version of the page. Go to the Mobile Styles section and add a media query for screen devices with a maximum width of 480 pixels.
Under the mobile layout, Michael wants the navigation list containing links to the 18 holes on the course to be displayed near the bottom of the page. Create a style rule that sets the flex order of the hole_list navigation list to 99. Create a style rule that sets the flex order of the footer to 100.
To reduce clutter, Michael wants the horizontal navigation list at the top of the page to be hidden unless the user taps a navicon. Create this hidden menu system by adding the following style rules to
hide the display of the ul element within the horizontal navigation list. change the display property of the ul element to block if the user hovers over the navicon hypertext link or hovers over the unordered list within the horizontal navigation list. (Hint: Review the hover discussion in Session 5.2 as needed.)
Aside Style
Michael also wants to hide the aside element when the page is viewed on a mobile device. Add a style rule to accomplish this.
My code:
----------------------------------------------------
nav#hole_list {
-webkit-order: 99;
order: 99;
}
footer {
-webkit-order: 100;
order: 100;
}
nav.horizontal > ul {
display: -webkit-display: none;
display: none;
}
nav.horizontal:hover ul {
display: -webkit-display: block;
display: block;
}
aside {
display: -webkit-display: none;
display: none;
}
}
------------------------------------
Current:
------------------------------------
------------------------------------
Solution:
------------------------------------
Willet Creek Home Course Events Membership Dining Tee Times COURSE O O O O O O O O O TO Hole 1 Men Par: 5 Distance: 475 yds Handicap: 7 Women Par: 5 Distance: 401 yds Handicap: 7 A perfect hole to begin your day at Willet Creek. Long hitters have a reasonable chance at birdie. The hole plays slightly uphill. When the wind is blowing in, it can be an especially challenging hole to par. Two good shots will leave a short approach shot to an elevated green. Willet Lodge Mountain View Restaurant Spacious and elegant accommodations in a beautiful mountain setting Fine dining at reasonable prices; enjoy our fresh mountain trout prepared to order Double K Ranch Zip Rides Horseback riding, chuck wagon suppers. Enjoy the outdoors and see the headwaters of Willet Creek Experience the thrill of Willet Canyon by riding over on our zip lines Spa Guided Hikes Relax at our world-class spa and make an appointment for a refreshing massage at our Health & Wellness Center Tour the surrounding canyon and view beautiful waterfalls with our experienced trail guides Willet Creek.531 Terry Canyon, Ogden UT 84401 Willet Creek Hole 1 Men Par: 5 Distance: 475 yds Handicap: 7 Women Par: 5 Distance: 401 yds Handicap: 7 A perfect hole to begin your day at Willet Creek. Long hitters have a reasonable chance at birdie. The hole plays slightly uphill. When the wind is blowing in, it can be an especially challenging hole to par. Two good shots will leave a short approach shot to an elevated green. Willet Lodge Mountain View Restaurant Spacious and elegant accommodations in a beautiful mountain setting Fine dining at reasonable prices; enjoy our fresh mountain trout prepared to order Double K Ranch Zip Rides Horseback riding, chuck wagon suppers. Enjoy the outdoors and see the headwaters of Willet Creek Experience the thrill of Willet Canyon by riding over on our zip lines Spa Guided Hikes Relax at our world-class spa and make an appointment for a refreshing massage at our Health & Wellness Center Tour the surrounding canyon and view beautiful waterfalls with our experienced trail guides COURSE O O O O O O O O O Willet Creek.531 Terry Canyon, Ogden UT 84401 Willet Creek Home Course Events Membership Dining Tee Times COURSE O O O O O O O O O TO Hole 1 Men Par: 5 Distance: 475 yds Handicap: 7 Women Par: 5 Distance: 401 yds Handicap: 7 A perfect hole to begin your day at Willet Creek. Long hitters have a reasonable chance at birdie. The hole plays slightly uphill. When the wind is blowing in, it can be an especially challenging hole to par. Two good shots will leave a short approach shot to an elevated green. Willet Lodge Mountain View Restaurant Spacious and elegant accommodations in a beautiful mountain setting Fine dining at reasonable prices; enjoy our fresh mountain trout prepared to order Double K Ranch Zip Rides Horseback riding, chuck wagon suppers. Enjoy the outdoors and see the headwaters of Willet Creek Experience the thrill of Willet Canyon by riding over on our zip lines Spa Guided Hikes Relax at our world-class spa and make an appointment for a refreshing massage at our Health & Wellness Center Tour the surrounding canyon and view beautiful waterfalls with our experienced trail guides Willet Creek.531 Terry Canyon, Ogden UT 84401 Willet Creek Hole 1 Men Par: 5 Distance: 475 yds Handicap: 7 Women Par: 5 Distance: 401 yds Handicap: 7 A perfect hole to begin your day at Willet Creek. Long hitters have a reasonable chance at birdie. The hole plays slightly uphill. When the wind is blowing in, it can be an especially challenging hole to par. Two good shots will leave a short approach shot to an elevated green. Willet Lodge Mountain View Restaurant Spacious and elegant accommodations in a beautiful mountain setting Fine dining at reasonable prices; enjoy our fresh mountain trout prepared to order Double K Ranch Zip Rides Horseback riding, chuck wagon suppers. Enjoy the outdoors and see the headwaters of Willet Creek Experience the thrill of Willet Canyon by riding over on our zip lines Spa Guided Hikes Relax at our world-class spa and make an appointment for a refreshing massage at our Health & Wellness Center Tour the surrounding canyon and view beautiful waterfalls with our experienced trail guides COURSE O O O O O O O O O Willet Creek.531 Terry Canyon, Ogden UT 84401
