I'm using React-Bootstrap and building a Navbar. I want to replace the React-Bootstrap hamburger menu icon with a Font Awesome hamburger icon.
How do I go about changing the built in hamburger menu? Here is my Navbar:
<Navbar expand="lg">
<Navbar.Brand href="#home">
<FontAwesomeIcon icon="gem" color="#20FC8F" size="2x" />
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
I am importing the Font Awesome icon I want to use and displaying it like this:
<FontAwesomeIcon icon="bars" color="#20FC8F" size="2x" />;
How can I use this in place of the React-Bootstrap toggler?
This is how it worked for me. Simply insert <span> element with icon in Navbar.Toggle. Like this:
<Navbar expand="lg">
<Navbar.Brand href="#home">
<FontAwesomeIcon icon="gem" color="#20FC8F" size="2x" />
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav">
<span>
<FontAwesomeIcon
icon="bars" color="#20FC8F" size="2x"
/>
</span>
</Navbar.Toggle>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
You can actually omit <span> all whatsoever and it still works.
Related
I would like to center the brand logo in my page and it is currently to the side:
Here is my code:
export default function NavBar() {
return (
<Navbar bg='light' fixed='top' className='navbar py-1 '>
<Container>
<HiOutlineMenuAlt4 />
<Navbar.Brand className="justify-content-center">
<img src={publicgoodslogo} width="120" height="65" ></img>
</Navbar.Brand>
<Navbar.Collapse className="justify-content-end">
<Nav>
<Nav.Link><GoSearch /></Nav.Link>
</Nav>
<Navbar.Text>
Cart:
</Navbar.Text>
</Navbar.Collapse>
<Nav>
0
</Nav>
</Container>
</Navbar>
)
According to the docs I should just be able to use justify-content-center but that doesn't work. Is it because I need to wrap the menu icon in something?
I am trying to place the last Nav.Link (logOut) to the right on the nav bar (see picture) without affecting the other nav.links. I have tried with d-flex and so on but it does not work. What to do in the specific nav.link for getting it to stay right, and still included in the Navbar.collapse?
import "./NavBar.css"
import '#fortawesome/fontawesome-free/css/all.min.css';
export const NavBar = () =>{
return (
<Navbar className="nav-bar" expand="lg" sticky="top">
<Container>
<Navbar.Brand href="#home">Scancar</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link href="find">Find booking</Nav.Link>
<Nav.Link href="book">Book</Nav.Link>
<Nav.Link href="pricing">Overview</Nav.Link>
<Nav.Link href="pricing">Release</Nav.Link>
<Nav.Link href="pricing">Request</Nav.Link>
<Nav.Link href="logOut"> <i className="fas fa-sign-out-alt"></i> </Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
See the navbar
You can add ms-auto
<Nav.Link href="logOut" className="ms-auto"> <i className="fas fa-sign-out-alt"></i> </Nav.Link>
I am having a hard time changing the color of NavLink inside the NavBar when it is inactive and when you hover over it.
<Navbar className="navbar-spacing justify-content-center" expand="lg">
<Navbar.Brand href="#home">
<img
src={logo}
width="270"
className="d-inline-block align-top"
alt="Overland NInja Logo"
/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="on-nav" />
<Navbar.Collapse id="on-nav">
<Nav className="mr-auto" >
<Nav.Link className="inactive" href="#">Home</Nav.Link>
<Nav.Link className="inactive" href="#">Contributors</Nav.Link>
<Nav.Link className="inactive" href="#">Newsletter</Nav.Link>
<Nav.Link className="inactive" href="#">Contact Us</Nav.Link>
</Nav>
<Nav>
<Nav.Link className="inactive" href="#">Browse Overlanding Routes</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
This is my CSS code:
.inactive {
color: #000;
}
.inactive:hover {
color: #1D8F32;
}
The style doesn't seem to be applied and the color is not changing at all (Even when it's active and inactive).
You can pass in a bsPrefix prop to replace the generated css class name of the react bootstrap component.
import { Navbar, Nav } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";
const customClass = "myCustomNavLink";
export default function App() {
return (
<Navbar className="navbar-spacing justify-content-center" expand="lg">
<Navbar.Toggle aria-controls="on-nav" />
<Navbar.Collapse id="on-nav">
<Nav className="mr-auto">
<Nav.Link href="#" bsPrefix={customClass}>
Home
</Nav.Link>
<Nav.Link href="#" bsPrefix={customClass}>
Contributors
</Nav.Link>
<Nav.Link href="#" bsPrefix={customClass}>
Newsletter
</Nav.Link>
<Nav.Link href="#" bsPrefix={customClass}>
Contact Us
</Nav.Link>
</Nav>
<Nav>
<Nav.Link className="inactive" href="#">
Browse Overlanding Routes
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
// styles.css
.myCustomNavLink {
color: #000;
}
.myCustomNavLink:hover {
color: #1d8f32;
}
Note that by doing this, the default class of nav-link is no longer applied. As such, you might need to consider copying other nav-link styles to your custom stylesheet (padding, display, etc).
The other option is just matching or increasing the specificity of the bootstrap selector used for Nav.Link
// styles.css
.navbar-light .navbar-nav .nav-link.inactive {
color: #000;
}
.navbar-light .navbar-nav .nav-link.inactive:focus,
.navbar-light .navbar-nav .nav-link.inactive:hover {
color: #1d8f32;
}
How to add some custom CSS styles to the Nav component to manage the padding between the nav items and make it float right of the page?
const navbar = props => (
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#features">Home</Nav.Link>
<Nav.Link href="#pricing">About Us</Nav.Link>
<NavDropdown title="Facilities" id="collasible-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Library</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.2">Laboratories</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.3">Transportation</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.3">Hostel</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="#pricing">Gallery</Nav.Link>
<Nav.Link href="#pricing">Event</Nav.Link>
<Nav.Link href="#pricing">Contact Us</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
you would need to override the default CSS of bootstrap, you could check the class names using the inspector of your browser and modify those classes since the react-bootstrap compiles to bootstrap anyways
create a css file called
Navbar.css
.navbar-nav {
float: right !important;
}
.navbar-expand-lg .navbar-collapse {
display: inline !important;
}
import it into navbar.js component
import "./Navbar.css";
const navbar = props => (
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#features">Home</Nav.Link>
<Nav.Link href="#pricing">About Us</Nav.Link>
<NavDropdown title="Facilities" id="collasible-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Library</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.2">Laboratories</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.3">Transportation</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.3">Hostel</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="#pricing">Gallery</Nav.Link>
<Nav.Link href="#pricing">Event</Nav.Link>
<Nav.Link href="#pricing">Contact Us</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
I am using React Bootstrap and the class position-sticky doesn't work at all.
There is not overflow at all levels.
Any hints?
I found out the Container needs height specified.
Adding height: 100% to the parent and top: 0 to the child fixes the issue.
The reason is that the sticky rule uses the height of the parent to calculate its own position.
Using React Bootstrap the className h-100 can be used to set height: 100%
I hope this helps also others :)
<>
<Navbar
sticky="top"
collapseOnSelect
expand="lg"
bg="primary"
variant="dark"
>
<Container className="">
<Navbar.Brand as={Link} to="/">
<img height={"30px"} src={logo} alt="" />
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="home#services">Services</Nav.Link>
<Nav.Link href="home#experts">Experts</Nav.Link>
<NavDropdown title="Dropdown" id="collasible-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>
<Nav>
<Nav.Link as={Link} to="/about">
About
</Nav.Link>
<Nav.Link as={Link} to="/login">
Log In
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</>