Styling Issues with React-Scroll Link component in Navbar

Question

I am having an issue with the Link component from the react-scroll library. I am trying to achieve a simple hover effect on my navigation links, where they increase in size using transform: scale(1.1). However, this effect is not working. I've tried using normal div elements instead of Link tags and the effect works fine, so I suspect there is something in the react-scroll library that is conflicting.

Here is my code:

JSX:

import React from "react";
import { Link, Element, Events, animateScroll as scroll, scrollSpy, scroller } from "react-scroll";
import "../App.css";

function Navbar() {

  return (
    <Link
      activeClass="active"
      to="about"
      spy={true}
      smooth={true}
      offset={-100}
      duration={500}
      className="navbar-item"
    >
      Hover over me to make me grow, click me to scroll down
    </Link>
  );
}

export default Navbar;

CSS:

.navbar-item {
  transition: all 0.3s ease;
}

.navbar-item:hover {
  transform: scale(1.1);
}

I would appreciate any assistance in resolving this issue. Thank you in advance!

Answer 1

I have checked your code, and even though everything seems to be correct, it wasn't scaling or any other thing related to transforming property on hover. I think this might also be the case with a simple tag. So the solution that I came up with is to put your tag inside another tag and give your "navbar-item" class to that div instead. This way it will work, and you can do whatever you want on hover.

For the record here is where I tried your react component: https://playcode.io/1188754

And here is the live preview for it: https://1188754.playcode.io/

Let me know if this was helpful or if you found any other solution.