EasyCourse: E1
Flexbox Search Navigation Bar (2/5)

👤 Client Story:

Our design studio needs an updated website. The previous navigation bar was cluttered and not fully responsive, so we would like a redesign from the ground up. Please be sure the final design is fully mobile responsive, and that our "Contact" button is the primary focus. We're in the process of updating the logo too, so feel free to use a substitute of your choice. We'll need a search bar on the right-hand side.

Can you build a robust navigation bar with a search input?

🚀 Summary

This project will help you practice CSS flexbox principles and requires an understanding of the box-model for padding and margin. Additionally, this easy level project includes mobile-responsive challenges and a CTA (Call to Action) along with a search input field.

📗 Recommended Pre-study

Search Input
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search

Visual Hierachy
https://www.canva.com/learn/visual-hierarchy

Javascript Class Toggle
https://www.w3schools.com/howto/howto_js_toggle_class.asp

CSS Box-model
https://css-tricks.com/the-css-box-model

CSS Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox

📋 Project Requirements:

Goal: Build a fully functional mobile-responsive navigation bar for a minimalist website and a non-functional search input.

1. HTML/CSS:

   • Maintain space between the outer edges and the internal elements.
   • Split the links with Flexbox.
     (Hint: Try justify-content:space-between; )
   • Center all items in the Y-direction (vertical axis).
   • Maintain even spacing between the links.
   • Emphasize the "Contact" link.
   • Add hamburger menu icon for mobile screens.
     (Hint: Try a media query with display:none; when necessary)
   • Hide the desktop links on mobile screens.
   • Create a mobile menu (full-screen column of links) for mobile screens.
   • Add a close ("x") icon inside the mobile menu to close it.
   • Add a search input field (non-functional) to both menus.

2. Javascript:

   • Open the mobile menu when clicking on the hamburger button.
   • Close the mobile menu when clicking on the close button.
     (Hint: Toggle a class with display:none; on the menu.)

⚠️ Challenge

Add fake search results by creating a popup that shows a few clickable links after clicking on the search button.