Links inside Sidebar after click have no active color
See original GitHub issuePrerequisites
Please answer the following questions for yourself before submitting an issue.
- I am running the latest version
- I checked the documentation and found no answer
- I checked to make sure that this issue has not already been filed
- I’m reporting the issue to the correct repository (for multi-repository projects)
Expected Behavior
The links should have the active colors set from the Right Menu (FixedPlugin) after pressing one of them.
Current Behavior
When clicking the links in the Left Menu (Sidebar) component, the active color disappears.
Failure Information (for bugs)
This happens due to the focus css prop.
Steps to Reproduce
Please provide detailed steps for reproducing the issue.
- Go on the live preview: https://demos.creative-tim.com/material-dashboard-react/#/admin/dashboard
- Click on any of the links inside the Left Menu (Sidebar component)
- Without any further clicking, or defocusing from the clicked link, move the cursor away
- Notice how the link remains with no background color
Context
Unrelevant
Failure Logs
This happens due to the focus css prop.
Solution
- Go inside
src/assets/jss/material-dashboard-react/components/sidebarStyle.jsx
- Change lines
191
,206
,228
,250
and272
from"&:hover": {
to"&:hover,&:focus": {
Best, Manu
Issue Analytics
- State:
- Created 5 years ago
- Reactions:7
- Comments:11 (4 by maintainers)
Top Results From Across the Web
CSS Active link not working - Stack Overflow
On hover the navigation changes the background color. Thats simple. However I can not get the background to stay if the link is...
Read more >W3.CSS Navigation Bars - W3Schools
Hoverable Links. When you mouse over a button, the background color will change to grey. If you want a different background color on...
Read more >Styling lists and links - W3C Wiki
When you are styling links, be careful not to rely entirely on colour to distinguish between link states. Not everyone can see colour...
Read more >Styling links - Learn web development | MDN
The final article in our Styling text module details how to use custom ... Active: A link that is activated (e.g., clicked on),...
Read more >Styling navigation - Squarespace Help Center
Active links are always underlined. In some templates, there are more options for navigation links depending on if they've been clicked. This is...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Thanks a lot @EINazare it worked!
Please try this code:
I’ve seen recently that sometimes, the combination of
history
&react-router-dom
fails.