I'm attempting to implement a custom hover effect on my navigation items using external CSS. However, when I import it into my Navbar, the Bootstrap styles are not being overridden and the effect is not visible. Additionally, when the Navbar collapses, the three-line icon is not visible, but upon clicking on the top right corner, it appears and functions properly.
**
Below is the content of my NAVBAR.JS file for React:
**
import React, { Component } from 'react';
import { Navbar, Nav, Button } from 'react-bootstrap';
import styles from './Navbar.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Link } from 'react-router-dom';
const links = [
{
href: '/novels/601e73a75e4fd540506c9938',
text: 'Novel',
},
{ href: '#', text: 'Buy EA Coins' },
{ href: '#', text: 'Get Started' },
{ href: '#', text: 'Library' },
{ href: '/', text: 'home' },
];
const createNavItem = ({ href, text, className }) => (
<Nav.Item>
<Nav.Link className={className}>
<Link to={href}> {text}</Link>
</Nav.Link>
</Nav.Item>
);
class NavbarMain extends Component {
constructor(props) {
super(props);
this.state = {
key: 'home',
};
this.handleSelect = this.handleSelect.bind(this);
}
handleSelect(key) {
this.setState({
key: key,
});
alert(`selected ${key}`);
}
render() {
return (
<Navbar
bg="light"
variant="danger"
expand="lg"
fixed-top
className={styles.test}
>
<Navbar bg="light">
<Navbar.Brand>
<Link to="/" exact>
<img
src="EA-Logo-edit.png"
width="90"
height="70"
margin="none"
className="d-inline-block align-top"
alt="React Bootstrap logo"
style={{ margin: 'none' }}
/>
</Link>
</Navbar.Brand>
</Navbar>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto" activeKey="/" className={styles.avbar}>
{links.map(createNavItem)}
</Nav>
<Nav className="ml-auto" navbar>
<Nav.Item>
<Nav.Link href="#discord">
<Button variant="outline-dark">
<img height={25} width={40} src="discord.svg" alt="" />
Discord
</Button>
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="/auth/login">
<Button variant="outline-dark">
<img height={25} width={40} src="google.svg" alt="" />
Login
</Button>
</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default NavbarMain;
Here is my custom CSS file:
:local(.navbar.hover::before){
position: relative;
}
:local(.navbar:before){
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
:local(.navbar:hover){
color: #000;
}
:local(.navbar){
position: relative;
color: #000;
text-decoration: none;
}