0

I´m about to finish my portafolio but i don´t know how to change the scroll behavior of my "Contact me" nav item with this npm react-responsive-navbar-overlay.

This is my Portafolio: https://alexandropineda.netlify.app/

this is my nav´s code

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 Letra from "../Assets/img/letra-mayus-azul-25medium.png";

function Nav() {

  function scrollToTestDiv(){
    const divElement = document.getElementById('contact');
    divElement.scrollIntoView({ behavior: 'smooth' });
  }

  // let text = "<span onClick={scrollToTestDiv}>/#contact </span>"

  return (
    <BrowserRouter>
      <Navbar fontColor="#000" backgroundColor="#fff" brand={<img onClick={scrollToTestDiv} className="letra-principal" src={Letra} />} links={[{text: "Contact me", link: "#contact"}]} />
      <Routes>
        <Route exact path="/" component={Home} />
        <Route path="/#contact" component={Contact} />
      </Routes>
    </BrowserRouter>
  );
}

export default Nav;

As you can see when you click "A" scroll smoothly but my nav item doesn´t.

Alexandro Pineda
  • 706
  • 3
  • 10

1 Answers1

1

from what I have seen, when you click on "contact" you are changing the url to https://alexandropineda.netlify.app/contact try to navigate to your component of "contact". The second part of my answer is that try to work with react-scroll instead react-responsive-navbar-overlay. I have seen him in alot of progjects and some forums as well he is the most popular component there.

this is an example for how it works, and a silmilar question that you ask.

react-scroll | How to scroll to a specific targeted component when clicking on Navbar Link

I hope my answer guided you.

N MZ
  • 121
  • 1
  • 1
  • 9