[Bug] Responsive Issues with Header and Navigation on Small Screens (max-width: 340px) #293
Open
1 task done
Labels
💻 aspect: code
Concerns the software code in the repository
🛠 goal: fix
Bug fix
🟧 priority: high
Stalls work on the project or its dependents
🧹 status: ticket work required
Needs more details before it can be worked on
Description
On screens with a maximum width of 340px, the header and navigation items do not display properly. The text appears too large, causing elements to overflow, and the menu button is not positioned optimally. This impacts usability, making the navigation difficult to use on smaller devices.
Reproduction
Expectation
The header and navigation should be fully responsive on smaller screens. All text elements, including the navigation items, should adjust to a smaller size to fit the screen width. The menu button should be aligned properly, slightly moved to the left to improve accessibility.
Screenshots
Environment
Additional context
This issue affects all instances of the header across the Vocabulary project, impacting user experience on small devices. Making the header and navigation responsive will improve accessibility and usability across all projects that use this header component.
Resolution
The text was updated successfully, but these errors were encountered: