After installing the react-bootstrap module using the pm command and importing it into my _app.js file, I encountered an issue when trying to modify the Bootstrap code for my navbar component. The code snippet provided below showcases the navbar component:
import Image from 'next/image'
import {
Nav,
Navbar,
NavDropdown,
Form,
Button,
FormControl,
Container,
} from "react-bootstrap";
import headerStyles from '../styles/Header.module.css'
//${headerStyles.navLinks}
export default function NavBar() {
return (
<>
<Navbar bg="dark" expand="lg" variant="dark">
<Container fluid>
<Navbar.Brand href="#">
<Image src={'/logo.png'} height = "30px" width="190px"/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav
className={"me-auto my-2 my-lg-0 " + headerStyles.navLinks}
style={{ maxHeight: "100px" }}
navbarScroll
>
<Nav.Link className={headerStyles.navLinks_l} href="#action1">Home</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<Nav.Link href="#" disabled>
Link
</Nav.Link>
</Nav>
<Form className="d-flex">
<FormControl
type="search"
placeholder="Search"
className={"me-2"}
aria-label="Search"
/>
</Form>
</Navbar.Collapse>
</Container>
</Navbar>
</>
);
}
I attempted to customize the CSS of Bootstrap using a CSS module initially but faced difficulties. Then I resorted to using a global stylesheet without success. Can someone provide assistance in this matter?
Global CSS Styles:
.navbar-collapse{
background-color: aqua;
color: black;
}
.navbar-dark .navbar-nav .nav-link {
color: rgb(0, 0, 0);
background-color: blue;
}
.navbar-expand-lg .navbar-nav{
justify-content: space-around;
margin: 0px;
}
.me-auto{
margin: 0 !important;
}