Menu
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.
904
Use a css file to change the color of a link in React. You can define styles that apply to anchor elements and import the css file in your component for the styles to take effect.
Use inline styles to set the text color of an element in React. js, e.g. <span style={{color: 'green'}}>colorful</span> . The text color will only be applied to the element to which it was added and its children.
To change the style of an element on click in React: Set the onClick prop on the element. When the element is clicked, set the active state. Use a ternary operator to conditionally set the new styles based on the state variable.
Use a css file to change the color of a link in React. You can define styles that apply to anchor elements and import the css file in your component for the styles to take effect. Copied! And here is how you would import your css file to apply the styles.
Changing the Background Color in React Background Color from an External CSS File. Let’s begin with what I consider to be the easiest method: importing a CSS... Using Inline Styles. The next approach to changing the background color in React is to write all of the CSS styles... Conditional Changing ...
When I apply the secondary color to the Button, it doesn't take effect. In other components it does work this way. <AppBar position='fixed'> <Toolbar> <Button color='secondary'> <Link to="/">Home</Link> </Button> </Toolbar> </AppBar> In App.js I create the custom Theme and wrap it around all components with <ThemeProvider theme= {customTheme}>
What you can do is pass component= {Link} to button, so it will render the Link as it base component. See the docs. Show activity on this post.
Try this:
.nav-link{
font-family: 'Roboto', sans-serif;
color: #2699FB !important;
}
inside "{}" put what you want, do not forget the "!important"
83
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 ; }
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
