Position Fixed Menu

Home

Develop your own design with two position fixed divs. Use one position fixed div to create the header menu and a second to create the go to top navigation circle (See the lower right corner of this page).

On your header menu, use named anchors to navigate to different parts within the page. To do so, use the hashtag in your menu links and named anchors at the destination. Examine the code to learn how to do this, but here's a hint:

Creates a link to a named anchor.

<a href="#aboutus">About Us</a>

Creates an area with a name used by the named anchor.

<a name="aboutus"></a>

Whenever you click on a named anchor link, the browser will navigate to the portion of a page with the name specified.

Notice how I handle the typography on this assignment. I don't use black as my text-color. Instead I use a lighter color, closer to gray. I also use css line-height to create a little space between lines of text. This makes your page more readable.

Also notice the use of flexbox for the top navigation.

About Us

The rest of this is lorem ipsum text. Aliquam erat volutpat. Praesent mollis mattis lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec libero lorem, egestas et metus et, auctor aliquam elit. Integer non ornare mi, sed dignissim erat. Suspendisse non sollicitudin est, ac lacinia magna. Quisque sit amet tellus orci. Cras eleifend ligula arcu, sit amet condimentum purus faucibus sed. Aliquam auctor ligula nibh, nec interdum erat placerat eu. Nulla quam ipsum, rhoncus suscipit urna eu, congue dapibus lorem. Aliquam feugiat diam id luctus auctor. Donec imperdiet justo ut imperdiet aliquam. Sed sed tellus dolor. Maecenas eu mauris elementum, aliquam nulla sit amet, lobortis eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis porta eros. Sed aliquet ante sed condimentum placerat. In ut erat mi. Duis vitae tempor enim, a mattis ante. Ut pellentesque at leo ut aliquam. Nunc purus risus, venenatis id orci sit amet, cursus porta quam. Suspendisse pharetra odio quis mauris congue cursus. Pellentesque sagittis cursus cursus. Phasellus eget elementum odio, eget blandit elit. Ut elementum tincidunt orci aliquam ultricies. Fusce sit amet magna in dolor bibendum pulvinar quis ac enim. Fusce eu urna id augue porta sollicitudin eget vel arcu. Nulla facilisi. Donec quis metus lectus.

Aliquam erat volutpat. Praesent mollis mattis lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec libero lorem, egestas et metus et, auctor aliquam elit. Integer non ornare mi, sed dignissim erat. Suspendisse non sollicitudin est, ac lacinia magna. Quisque sit amet tellus orci. Cras eleifend ligula arcu, sit amet condimentum purus faucibus sed. Aliquam auctor ligula nibh, nec interdum erat placerat eu. Nulla quam ipsum, rhoncus suscipit urna eu, congue dapibus lorem. Aliquam feugiat diam id luctus auctor. Donec imperdiet justo ut imperdiet aliquam. Sed sed tellus dolor. Maecenas eu mauris elementum, aliquam nulla sit amet, lobortis eros.

Etiam congue, nisi nec rhoncus rhoncus, mauris mauris scelerisque risus, viverra rhoncus velit lorem a orci. Fusce facilisis volutpat tortor at porta. Praesent tempus aliquet posuere. Pellentesque ultricies ultrices quam, sagittis pretium lorem facilisis at. Aliquam varius varius lacus, quis rutrum nulla aliquet eget. Integer id luctus sapien. Maecenas at pharetra augue. Proin orci elit, condimentum vel erat in, viverra imperdiet magna.

Vestibulum nec justo orci. Vivamus hendrerit turpis non est venenatis sollicitudin. Cras dignissim arcu felis. Ut aliquet velit eu nunc interdum, nec tristique dui porttitor. Nullam iaculis tincidunt libero, ut suscipit diam. Pellentesque quis velit fringilla, consectetur massa sed, molestie nibh. Sed vitae tristique lorem. Vivamus id facilisis nibh. Fusce vestibulum orci id dictum ornare. Donec vehicula sit amet libero quis tincidunt.

Curabitur commodo magna leo, vitae mattis dui luctus non. Aliquam erat volutpat. Phasellus nec nulla adipiscing mi dignissim consectetur nec a dui. Sed id auctor metus. Suspendisse vulputate lobortis dapibus. Aliquam lacinia tellus id purus varius, ac adipiscing massa ultrices. Vestibulum quis diam at ante pretium porttitor. In hac habitasse platea dictumst. Ut dui nisi, ultrices eleifend augue sit amet, viverra tincidunt sem. Integer enim mauris, molestie nec molestie ac, auctor ut nisl. Vestibulum suscipit eros ut pretium rutrum.

Position Fixed Menu

Home

About Us

Products

Contact Us