Is it possible to change the url for the site logo in the nav bar?
Related
Navbar.js code
MenuItems.js
App.js
Index.js
the nav bar is not reflecting on the localhost page..
https://williamgrube1.github.io/Library/
App.jsx code
When react app is opened only the header and footer show until you click on a link. How is this fixed?
I want to highlight the nav menu when scrolling this component in react.
If the Navbar is "Home About Products"
When I will scroll in the about section, About nav menu will be active or highlight.
How can I do this in react and is there any npm package for this?
You can use intersection observer.
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
or
You can also use waypoint Library
https://www.npmjs.com/package/react-waypoint
Please take a look at my code here on stackblitz.
Now this is what I want:
I want the Home link on the Navbar to be a link to the previous page. (e.g. In the Level1 page, the Home link should take me back to Category1 page.)
In the same example cited above, when I'm at the Level1 page, I want the "Home" link's text change to "Category 1"; and when I'm at the Category1 page, I want the link to change back to "Home". In short, the link's text would be the name of the previous page. But when I'm at the homepage, I want it to change to "Welcome!"
I want this all to be dynamic.
This is the initial Navbar.js:
import React from "react";
import { Link } from "react-router-dom";
const Navbar = () => {
return (
<nav>
<Link to="/">
<p className="home-link">Home</p>
</Link>
</nav>
);
};
export default Navbar;
Please help.
you cant get parent of current route by this example and set it on inner text of home BTN.
window.location.pathname.split('/')[window.location.pathname.split('/').length - 2]
every where you want to back to last step this line of code can help you show previous step name and router of previous step too depends on whats your current URL so you can push into history to change route or show to users
#Issue_Solved
Solution:
Inside package.json file update-
"homepage": "."
to
"homepage": "https://www.exapmle.com/",
Problem
Every thing is working fine on locally but on production server/ hosting serve when I go landing page to another page the Navbar brand image not found.
image on landing page: https://dazzling-yonath-5559e4.netlify.app/static/media/sundarbanX-logo.12b02027.png
image on profile page: https://dazzling-yonath-5559e4.netlify.app/profile/static/media/sundarbanX-logo.12b02027.png
And import image on Navbar component is:
import LOGO from '../images/sundarbanX-logo.png';
<img onClick={()=>history.push('/')}
style={{cursor:'pointer',marginRight: 160 }}
src={LOGO} alt="logo" className={classes.logo} />
Thanks in advance
Use require instead of import for importing images.
const Logo = require('../images/sundarbanX-logo.png');