Responsive: Header navigation links overlap with logo on mobile

[pari-dubey1]

1. The Problem

Current Behavior: On the "Contact Us" page, when the screen is resized to a smaller width, the navigation links in the header ("Recipe," "Customize," "Scale Recipes") overlap with the website logo "BakeGenius.ai". This makes the header unreadable and unusable.

Expected Behavior: The header should be fully responsive. On smaller screens, the navigation links should collapse into a hamburger menu icon (☰) to prevent layout issues and maintain usability.

2. Proposed Solution

Suggestion: Implement a "hamburger menu" for the header navigation.

Use a media query to hide the text links on screens below a certain breakpoint (e.g., 768px).

Display a hamburger menu icon in their place.

Use JavaScript to toggle the visibility of the navigation links in a dropdown menu when the icon is clicked.

[github-actions]

Thank you for raising this issue!

We'll review it as soon as possible. We truly appreciate your contributions! ✨

Meanwhile make sure you've visited the README.md, CONTRIBUTING.md, and CODE_OF_CONDUCT.md before creating a PR for this. Also, please do NOT create a PR until this issue has been assigned to you. 😊