I'm almost done with my portfolio but I'm struggling to figure out how to change the scrolling behavior of the "Contact me" nav item using the npm react-responsive-navbar-overlay.
Check out my Portfolio here:
Here is the code for my navigation:
import "../Css/index.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Navbar } from "react-responsive-navbar-overlay";
import Home from "./Home";
import Contact from "./Contact";
import Letter from "../Assets/img/letra-mayus-azul-25medium.png";
function Nav() {
function scrollToTestDiv(){
const divElement = document.getElementById('contact');
divElement.scrollIntoView({ behavior: 'smooth' });
}
return (
<BrowserRouter>
<Navbar fontColor="#000" backgroundColor="#fff" brand={<img onClick={scrollToTestDiv} className="logo" src={Letter} />} links={[{text: "Contact me", link: "#contact"}]} />
<Routes>
<Route exact path="/" component={Home} />
<Route path="/#contact" component={Contact} />
</Routes>
</BrowserRouter>
);
}
export default Nav;
It seems that when you click on the logo it scrolls smoothly, but the nav item doesn't. How can I fix this?