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:
JavaScript
x
47
47
1
import React from 'react';
2
import './Navbar.css';
3
import Logo from './Logo.png';
4
import { Nav, Navbar, NavDropdown, FormControl, Button, Form } from "react-bootstrap";
5
6
const Nabar=()=>{
7
return(
8
9
<Navbar fixed="top" expand="sm" >
10
11
<Navbar.Brand href="/">
12
<img
13
src={Logo}
14
style={{width:'10em', Height:'10em'}}
15
className="d-inline-block align-top"
16
alt="Youth Math Logo"
17
/>
18
</Navbar.Brand>
19
20
<Navbar.Toggle aria-controls="basic-navbar-nav" />
21
22
<Navbar.Collapse id="basic-navbar-nav">
23
<Nav className="mr-auto">
24
25
//------------------------Over Here-----------------------------------------------------------------
26
<Nav.Link className="home" href="#home">Home</Nav.Link>
27
<Nav.Link href="#link">Link</Nav.Link>
28
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
29
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
30
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
31
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
32
<NavDropdown.Divider />
33
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
34
</NavDropdown>
35
</Nav>
36
<Form inline>
37
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
38
<Button variant="outline-success">Search</Button>
39
</Form>
40
</Navbar.Collapse>
41
42
</Navbar>
43
);
44
}
45
46
export default Nabar;
47
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 ; }