Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Links inside Sidebar after click have no active color

See original GitHub issue


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.

  1. Go on the live preview:
  2. Click on any of the links inside the Left Menu (Sidebar component)
  3. Without any further clicking, or defocusing from the clicked link, move the cursor away
  4. Notice how the link remains with no background color



Failure Logs

This happens due to the focus css prop.


  1. Go inside src/assets/jss/material-dashboard-react/components/sidebarStyle.jsx
  2. Change lines 191, 206, 228, 250 and 272 from "&:hover": { to "&:hover,&:focus": {

Best, Manu

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:7
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

Samriddhi25commented, Jun 17, 2020

Thanks a lot @EINazare it worked!

einazarecommented, Jun 17, 2020

Please try this code:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";

// core components
import Admin from "layouts/Admin.js";
import RTL from "layouts/RTL.js";

import "assets/css/material-dashboard-react.css?v=1.9.0";

      <Route path="/admin" component={Admin} />
      <Route path="/rtl" component={RTL} />
      <Redirect from="/" to="/admin/dashboard" />

I’ve seen recently that sometimes, the combination of history & react-router-dom fails.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found