Implement a Responsive Navigation Menu

[TechEvolvace]

Objective:

For more intuitive and cleaner UI design, a responsive navigation menu that can adapt to different screen widths or different browser widths!

Things to Implement:

• For large screen widths (screen-width > 550px, typically the width of a laptop/desktop screen), have the three navigation menu options (Home, About, and Contact) be displayed horizontally, with these menu options' size constantly shrink or grow depending on whether the width of the browser is shrinking or growing at the user's cursor drag!
• For small screen widths (screen width <= 550px, typically the width of a phone screen), implement a menu icon (a hamburger menu icon is typically used here) that is displayed inside the navigation bar element
  • Functionality:
    • When the user clicks on the menu icon, it will display on a separate element the three navigation menu options (Home, About, and Contact)
    • When the user clicks on the menu icon while the three navigation menu options are currently displayed, it will hide the three navigation menu options from view and revert the website appearance back to its default appearance before the menu icon was clicked
  • Characteristics:
    • Only gets displayed in navigation bar element when the screen width is less than or equal to 550px
    • Menu icon may look like a three bar icon (similar to a hamburger menu icon)
    • The element that displayed the three navigation menu options after the menu icon is clicked may be dragged at the user's cursor click-and-drag, but it will default to only taking up 1/3 of the current browser's width

[TechEvolvace]

Recent Changes

The pull request and merge from the implemented-website-elements branch has pulled in changes that allow both the header and the navigation menu options to still be readable across different screen and browser widths! Additionally, the header and the navigation menu options are organized in one row for both small and large screen widths, which means they are flexibly designed to fit with different screen widths really well!

Tasks in this Issue Accomplished

• The arrangement of the header and the navigation menu options to change in size for different screen widths from 550px and greater and still be displayed horizontally!
• Also works for small screen widths (less than or equal to 550px), but that will be replaced by a navigation menu icon (similar to a hamburger menu icon)
  • Despite needing to replace these navigation menu options, the navigation menu options are still displayed horizontally along with the header and are readable for small screen widths!

More Features Remaining to Implement

• Implement a menu icon for when the screen or browser width is small (less than or equal to 550px)
  • When clicked, it either displays or hides the three available navigation menu options on a separate element
  • The element containing the three navigation menu options can be flexibly dragged at the user's cursor click-and-drag to adjust that element's width and the size of the navigation menu options. By default, it will take up 1/3 of the current browser's width and appears from the right screen, but below the navigation bar element.

[TechEvolvace]

More Recent Changes

The navigation menu options now load their specified webpage for this website!

• Ex:
  • "Home" -> loads the Home or landing page of this website!
  • "About" -> loads the About page of this website!
  • "Contact" -> loads the Contact page of this website!

[TechEvolvace]

More Recent Changes (Part 2)

The navigation menu no longer looks like they are appended to the right edge of the browser. There's now enough space for the navigation menu and all the important elements to be readable and visibly separated from both the edges of the browser and the other elements!