I have tried everything possible(inline, another CSS file you name it) but nothing seems to work.
I am trying to make a Navbar using React bootstrap.
This one: https://react-bootstrap.github.io/components/navbar/
Here’s my code:
import React from 'react'; import './Navbar.css'; import Logo from './Logo.png'; import { Nav, Navbar, NavDropdown, FormControl, Button, Form } from "react-bootstrap"; const Nabar=()=>{ return( <Navbar fixed="top" expand="sm" > <Navbar.Brand href="/"> <img src={Logo} style={{width:'10em', Height:'10em'}} className="d-inline-block align-top" alt="Youth Math Logo" /> </Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="mr-auto"> //------------------------Over Here----------------------------------------------------------------- <Nav.Link className="home" 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> <Form inline> <FormControl type="text" placeholder="Search" className="mr-sm-2" /> <Button variant="outline-success">Search</Button> </Form> </Navbar.Collapse> </Navbar> ); } export default Nabar;
I want to change it’s color from default to white.
Advertisement
Answer
Instead of <Nav.Link href="#link">Link</Nav.Link>
write
<Nav.Link href="#link"><h4 className="linkText">Link</h4></Nav.Link>
Followed by CSS
.linkText{ color: white ; }