Adapting Navigation Menu Project

Goal: Develop a website that have an adaptable navigation bar that displays all available menu options for wide screens and an interactive clickable menu icon for narrow screens that displays all available menu options when clicked!

Purpose: 1) Website has proper navigation UI design that can handle different screen widths!

• When screen is wide (screen width > 550 px, typically the width of a desktop or laptop screen), the navigation menu options are displayed horizontally in the navigation bar
• When screen is narrow (screen width <= 550 px, typically the width of a phone screen), a navigation menu icon (also known as a hamburger icon) is displayed in the navigation bar. When this icon is clicked, it will display all the avilable menu option! Tap the icon again to hide these menu options away, and the website's appearance will default back to display its intended contents.

2) This will temporarily be an experiment area for me to see all the available controls I can use when designing this intutitive and responsive navigation menu system before I can apply to my other projects

• Other projects I can implement:
  • Guess the Secret Number
  • Portfolio