I am new to React and wanted to add cursor:pointer on react router Link hover in React. I am using CSS modules and basically did everything right but still pointer does not appear on hover. Here is the code I am using:
<Link className={styles.title} to="/">
<h2>
<i className="fa fa-sun-o "></i>
{title}
</h2>
</Link>
The code in CSS file
.title,
.title:hover,
.title:active,
.title:visited,
.title:focus {
text-decoration: none;
cursor: pointer;
color: blue;
}
className should be applied to Link's children or a wrapper. Link doesn't accept className prop
<Link to="/">
<h2 className={styles.title}>
<i className="fa fa-sun-o "></i>
{title}
</h2>
</Link>
Related
I'm using a combination of React Bootstrap and React, to make a single page application, I've tried a few methods to get the Offcanvas menu to close when I click a link. I tried making an inline script on the link that toggles the menu, but what I found is the menu closes as I want it to but then the link only takes me halfway to where it should navigate to.
this is my code so far:
import React from "react";
import { Navbar, Nav, Container, Offcanvas } from "react-bootstrap";
import { StaticImage } from "gatsby-plugin-image";
import styled from "styled-components";
import { Link } from "gatsby";
const Wrapper = styled.div`
background-color: #9ac2ba;
.Nav-Brand {
display: flex;
}
.navbar {
background-color: #9ac2ba;
}
`;
const LinkWrapper = styled.div`
margin-top: 20px;
font-size: 1.5rem;
text-align: center;
color: #333;
.nav-link {
color: #333;
}
.nav-link:hover {
color: #000;
}
`;
const Navigation = () => {
return (
<Wrapper>
<Navbar
as="nav"
variant="light"
fixed="top"
expand={false}
className="shadow"
>
<Container>
<Navbar.Brand href="/" className="Nav-Brand">
<StaticImage
src="../images/Spf-Brand-01.jpg"
alt="Brand Image"
layout="constrained"
placeholder="blurred"
height={50}
loading="eager"
/>
<h1 className="visually-hidden">
SPF Paint & Decorating, Birmingham
</h1>
</Navbar.Brand>
<Navbar.Toggle
aria-controls="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
/>
<Navbar.Offcanvas id="offcanvasNavbar" placement="start">
<Offcanvas.Header closeButton>
<Offcanvas.Title id="offcanvasNavbarLabel">
<span className="visually-hidden">SPF Nav Menu</span>
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav className="justify-content-end flex-grow-1 pe-3">
<StaticImage
src="../images/Spf-Brand-01.jpg"
alt="Brand Image"
layout="constrained"
placeholder="blurred"
height={50}
loading="eager"
className="offcanvas-brand"
/>
<LinkWrapper>
<Link to="/" className="nav-link">
Home
</Link>
<Link to="/#services" className="nav-link">
Services
</Link>
<Link to="/#faq" className="nav-link">
FAQ
</Link>
<Link to="/#contact" className="nav-link">
Contact
</Link>
</LinkWrapper>
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
</Wrapper>
);
};
export default Navigation;
this is the build of the site: https://pland.netlify.app/
All your links are to content on the same page, so using Link isn't necessary. Instead, replace these with regular anchor tags <a href=''>Link</a>
Secondly, the default behaviour of Offcanvas is that when the overlay is closed the focus is returned to where it was when the overlay was opened. That's why the page isn't scrolling to the correct position when the overlay is closed. To change this, you can pass in restoreFocus={false} prop to Offcanvas. See Offcanvas API docs.
Thirdly, to get the menu to close when a link is clicked, you should track whether the menu is open in state and add a toggle function to the onClick prop of each link, as well as the Navbar.Toggle.
const Navigation = () => {
const [menuOpen, setMenuOpen] = useState(false)
const toggleMenu = () => {
setMenuOpen(!menuOpen)
}
const handleClose = () => setMenuOpen(false)
return(
/** Omit code */
<Navbar.Toggle
aria-controls='offcanvasNavbar'
aria-labelledby='offcanvasNavbarLabel'
/** Add onClick toggle here */
onClick={toggleMenu}
/>
<Navbar.Offcanvas
id='offcanvasNavbar'
placement='start'
/** Add these props */
restoreFocus={false}
show={menuOpen}
onHide={handleClose}
>
/** omit code */
<Nav className='justify-content-end flex-grow-1 pe-3'>
<a href='#services' className='nav-link' onClick={toggleMenu}>
Services
</a>
<a href='#faq' className='nav-link' onClick={toggleMenu}>
FAQ
</a>
{/** more links */}
</Nav>
/** omit code */
)
}
There is an option in the docs to automatically close: collapseOnSelect
https://react-bootstrap.netlify.app/components/navbar/#navbar-props
<Navbar
collapseOnSelect
as="nav"
variant="light"
fixed="top"
expand={false}
className="shadow"
>
I want to change the color of navbar text depending upon which page I'm browsing.
Sample Code
For example if I'm on homepage, home icon should be in blue color.
Here is my Menu.js file
import React from "react";
import { Link, withRouter } from "react-router-dom";
const Menu = () => {
return (
<div className="wrapper">
<div className="row">
<nav>
<Link to="/home">
<i className="fas fa-home"></i>
</Link>
<Link to="/search">
<i className="fas fa-search"></i>
</Link>
<Link to="/notifications">
<i className="fas fa-bell"></i>
</Link>
<Link to="/messages">
<i className="fas fa-envelope"></i>
</Link>
<Link to="/profile">
<i className="fas fa-user"></i>
</Link>
<Link to="/signout">
<i className="fas fa-sign-out-alt"></i>
</Link>
</nav>
</div>
</div>
);
};
export default withRouter(Menu);
I'm unable to find location of current page.
Based on the react-router documentation, you can use activeClassName to achieve this functionality.
Check out this link
Example
<NavLink to="/faq" activeClassName="selected">
FAQs
</NavLink>
Following what Adin said, here is the implementation:
https://codesandbox.io/s/navbar-active-forked-6nep4
import React from "react";
import { Link, withRouter, NavLink } from "react-router-dom";
const Menu = () => {
return (
<div className="wrapper">
<div className="row">
<nav>
<NavLink
to="/home"
activeStyle={{
fontWeight: "bold",
color: "blue"
}}
>
<i className="fas fa-home"></i>
</NavLink>
<Link
to="/search"
activeStyle={{
fontWeight: "bold",
color: "blue"
}}
>
<i className="fas fa-search"></i>
</Link>
<NavLink
to="/notifications"
activeStyle={{
fontWeight: "bold",
color: "blue"
}}
>
<i className="fas fa-bell"></i>
</NavLink>
<NavLink
to="/messages"
activeStyle={{
fontWeight: "bold",
color: "blue"
}}
>
<i className="fas fa-envelope"></i>
</NavLink>
<NavLink
to="/profile"
activeStyle={{
fontWeight: "bold",
color: "blue"
}}
>
<i className="fas fa-user"></i>
</NavLink>
<NavLink
to="/signout"
activeStyle={{
fontWeight: "bold",
color: "blue"
}}
>
<i className="fas fa-sign-out-alt"></i>
</NavLink>
</nav>
</div>
</div>
);
};
export default withRouter(Menu);
I had the same issue but i was warking with NavLink, there is a props called activeClassName it detect when the NavLinkis active and apply style.
for exemple :
<NavLink to="/faq" activeClassName="selected">
FAQs
</NavLink>
for more click HERE
You can do it by using history props
import { useHistory } from 'react-router';
import { useHistory } from 'react-router';
var history = useHistory();
if (history.location.pathname == '<your route address>') {
//your required code
}
React Router Docs
history objects typically have the following properties and methods:
location - (object) The current location.
May have the following properties: pathname - (string) The path of the URL
Updated csb link
import React from "react";
import { Link, withRouter } from "react-router-dom";
const activeTab = (history, path) => {
if (history.location.pathname === path) {
return { color: "#1fa2f1" };
}
};
const Menu = ({ history }) => {
return (
<div className="wrapper">
<div className="row">
<nav>
<Link style={activeTab(history, "/")} to="/home">
<i className="fas fa-home"></i>
</Link>
<Link style={activeTab(history, "/search")} to="/search">
<i className="fas fa-search"></i>
</Link>
<Link
style={activeTab(history, "/notifications")}
to="/notifications"
>
<i className="fas fa-bell"></i>
</Link>
<Link style={activeTab(history, "/messages")} to="/messages">
<i className="fas fa-envelope"></i>
</Link>
<Link style={activeTab(history, "/profile")} to="/profile">
<i className="fas fa-user"></i>
</Link>
<Link style={activeTab(history, "/signout")}to="/signout">
<i className="fas fa-sign-out-alt"></i>
</Link>
</nav>
</div>
</div>
);
};
export default withRouter(Menu);
Edit:
One advantage of using history over NavLink is that Navlink doesn't work for nested routes but history does.
For example:
"/profile/yogeshdecodes" - Navlink will make this route active state.
"/profile/yogeshdecodes" - history will not make this active state because history matches exact route.
I'm setting scrolls with react-scroll but it isn't working for some reason. I checked the documentation but I can't see why this isn't working.
Here is my component where I'm setting the links:
import React from 'react';
import classes from './Footer.css';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { Link } from 'react-scroll';
import {
faFacebook,
faTwitter,
faInstagram,
} from '#fortawesome/free-brands-svg-icons';
const footer = (props) => (
<footer className={classes.Footer}>
<ul className={classes.FooterLinks}>
<li>
<Link
to="navigation-bar"
smooth={true}
duration={1000}
className={classes.FooterLink}
>
home
</Link>
</li>
<li>
<Link
to="about"
smooth={true}
duration={1000}
className={classes.FooterLink}
>
about
</Link>
</li>
<li>
<Link
to="products"
smooth={true}
duration={1000}
className={classes.FooterLink}
>
products
</Link>
</li>
</ul>
<ul className={classes.FooterIcons}>
<li>
<a
href="https://www.facebook.com/"
// target="_blank"
className={classes.FooterIcon}
>
<FontAwesomeIcon icon={faFacebook} />
</a>
</li>
<li>
<a
href="https://www.twitter.com"
// target="_blank"
className={classes.FooterIcon}
>
<FontAwesomeIcon icon={faTwitter} />
</a>
</li>
<li>
<a
href="https://instagram.com"
// target="_blank"
className={classes.FooterIcon}
>
<FontAwesomeIcon icon={faInstagram} />
</a>
</li>
</ul>
<p className={classes.Copyright}>
copyright © carlos suarez. all rights reserved
</p>
</footer>
);
Here is an example of the components and how Im setting Id:
import React from 'react';
import classes from './NavBar.css';
import NavbarMenuBurger from './NavbarMenuBurger/NavbarMenuBurger';
import NavbarCartIcon from './NavbarCartIcon/NavbarCartIcon';
const navBar = (props) => {
return (
<nav className={classes.Navbar} id="navigation-bar">
<NavbarMenuBurger clicked={props.menuDrawerShowToTrue} />
<h1 className={classes.HeaderTitle}>RAINBOW SODAS UK</h1>
<NavbarCartIcon clicked={props.drawerShowToTrue} />
</nav>
);
};
export default navBar;
All the other components are set similarly.
Unfortunately, something isn't right and I can't figure out what this could be. I checked the DOM after the page is rendered and notice that the tags are not showing the href property. Is this normal when using scroll-react?
It turns out I had a setting in my CSS that didn't allow scroll.
body,
html {
font-family: 'Roboto', sans-serif;
background: #fff;
color: rgb(41, 41, 41);
line-height: 1.5;
font-size: 0.875rem;
/* width: 100%;
height: 100%; */
overflow-x: hidden;
scroll-behavior: smooth;
}
I actually don't know whats wrong here is it some bootstrap error in the code do i have the wrong version or something?
I think align-items-center should do it i don't know why it doesn't. And please don't tell me to make the elements display:inline or inline-block, it does not work.
Here is the code:
import React, { Component } from "react";
import { Link } from "react-router-dom";
import logo from "../logo.svg";
import styled from "styled-components";
import { ButtonContainer } from "./Button";
export class Navbar extends Component {
render() {
return (
<NavWrapper className="navbar navbar-dark ">
<Link to="/">
<img src={logo} alt="store" className="navbar-brand " />
</Link>
<ul className="navbar-nav align-items-center">
<li className="nav-item ">
<Link to="/" className="nav-link">
products
</Link>
</li>
</ul>
<Link to="/cart" className="ml-auto">
<ButtonContainer>
<span className="mr-2">
<i className="fas fa-cart-plus" />
</span>
my cart
</ButtonContainer>
</Link>
</NavWrapper>
);
}
}
const NavWrapper = styled.nav`
background: var(--mainBlue);
.nav-link {
color: var(--mainWhite);
fontsize: 1.3rem;
text-transform: capitalize;
}
`;
export default Navbar;
I am sorry for taking your time, i just reinstalled bootstrap and it works...
I'm using Gatsby.js to build a site. It works very similarly to React.js.
I have a side menu. I would like the icons on this menu to be highlighted when the user is on the respective page. Gatsby has an 'activeStyle' option but this is not working for me. The icon still remains white when I am on the respective page.
My gatsby code using activeStyle looks like this:
<div class="sidebar_button">
<Link to="/about">
<i>
<FiUser size={22} activeStyle={{ color: "blue" }} />
</i>
<p>ABOUT</p>
</Link>
</div>
'FiUser' is the name of the icon I am using (with react-icons).
If I change 'activeStyle' to just 'style', the icon does change to blue - just not with 'activeStyle'.
I was wondering if anyone could point me in the right direction as to whats going wrong?
activeStyle and activeClassName are supposed to be used on the Link component itself, not on it's children.
<div class="sidebar_button">
<Link to="/about" activeClassName="active-link">
<i>
<FiUser size={22} className="user-icon" />
</i>
<p>ABOUT</p>
</Link>
</div>
The i and FiUser should not have any attributes that would override this style.
On styling:
.user-link {
color: blue;
}
.active .user-link {
color: white;
}
Docs
Using Boy With Silver Wings answer with some modifications, I found what worked for me was:
<div class="sidebar_button">
<Link to="/" activeClassName="user-link">
<i>
<TiHomeOutline size={22} className="user-icon" />
</i>
<p className="user-text">HOME</p>
</Link>
</div>
And for my CSS:
.user-icon {
color: #d8d8d8;
}
.user-text {
color: #d8d8d8;
}
.user-link .user-icon {
color: #97b27b;
}
.user-link .user-text {
color: #97b27b;
}
This generates exactly what I was looking for. I hope this can help someone else.
E.g when on the about/ 'silhouette' page it looks like this: