Currently I am learning react and in the process of creating a website using react-bootstrap. While working on my navbar, I encountered an issue where I was unable to change the font and font-color of the navbar items. The CSS that I applied only affected the font-size of my NavDropdown items.
import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import NavDropdown from "react-bootstrap/NavDropdown";
import "./Navbar.css";
export default function MainNavbar(props) {
return (
<div className="background-container">
<Navbar fluid expand="sm" sticky="top" className="main-nav">
<Navbar.Brand href="#home">My name</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ms-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">
Another action
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
I attempted to modify the font-color by adding the following CSS:
.main-nav {
font-size: 1.5rem !important;
color: pink;
}
Although the font-size changed successfully, the color remained unchanged despite applying the style as intended.
If more details are required, feel free to ask.