vigetlabs / wordpress-site-starter

2 stars 0 forks source link

[#67] Header navigation #80

Closed nathan-schmidt-viget closed 1 month ago

nathan-schmidt-viget commented 1 month ago

Summary

This styles the header navigation. Removed the WP default a11y as it was not fully 100% a11y and built my own with AlpineJS. Because we can't access some of the navigation HTML I had to inject the Alpine with JS onto the DOM.

The dark version will just change if we add dark to the parent div in the parts.

The styles are pretty basic allowing us to customize per client.

Issues

Testing Instructions

  1. Add navigation items in the admin.
  2. Test out that navigation on desktop and mobile.
  3. Test with keyboard and screen reader to make sure everything is a11y.

Screenshots

Screenshot 2024-05-21 at 8 13 18 AM Screenshot 2024-05-21 at 8 13 04 AM
Screenshot 2024-05-21 at 8 14 34 AM Screenshot 2024-05-21 at 8 15 02 AM

https://github.com/vigetlabs/wordpress-site-starter/assets/91974372/bd44aba4-419a-4f7c-94b5-f510e879f563