React, TS, Zustand, React Router, Framer Motion, CSS Modules

Solution retrospective
Hello 👋
Can someone let me know why I have issue with active NavLink
styles?
It works when inspected in dev tools and it "almost" works on mobile.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @MelvinAguilar
Hello there 👋. Good job on completing the challenge !
-
Your issue is that you've set
a.active
in yourHeader.module.css
file, but remember that when elements are rendered, React automatically assigns a unique name to that class. So, your class might look something likea._active_10909_45
, and such a class doesn't exist because<NavLink>
adds the.active
class without changing its name. That's why you'll never see the active link turn whiter.To solve that issue and avoid the problem, you could use the
[class="active"]
selector to prevent React from changing the class name and match the one set by NavLink:.header nav a[class="active"] img { filter: brightness(300%); }
I hope you find it useful! 😄
Happy coding!
Marked as helpful -
- @Thomsen-Codes
The side bar looks much better in the solution than in the original design, good and clean work.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord