Pull Nav RWD Demo

<main> HTML5 element for main content

This is a 2-column Responsive Web Design (RWD) Pull Nav template/demo using HTML5. When you click on the Menu option on a cell phone or small tablet, it pulls the Responsive Navigation menu down. If you click the Menu option again it toggles it back up, almost like a window shade can be pulled down or lifted up.

Right-click and choose View Source to see both Cascading Styles and HTML code to create this page.

Note: Tables may not play well with RWD, so avoid tables!

When viewed on a smart phone or a device less than 768px wide the navigation will display vertically, to fit the small device. When viewed on a tablet or desktop, the navigation will display horizontally.

In this case, the text "Domain Name Here" is actually a graphic added to the image above. It is often better to use text instead, which will provide more clarity when resized, and will also provide text for Search Engine Optimization (SEO).

Test this live by resizing your browser window.

Do with your styles, colors, design, and banner.

Students: Add a beautiful customized banner in the <header> element.

Be sure to change colors and styles to your preference, and add your background.
Change the navigation background image color and design.
The navigation background image is: url(images/navBackground.gif)
Right-click and choose View Source to see code and the internal stylesheet
Also be sure to put the internal styles in a separate external .css file.