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>
</>
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>
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'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.
I am trying to use a NavBar from react bootstrap. However there seems to be a <div class="container"> that adds width. How do I set this width to auto?
I tried the following:
.navbar > .container {
width:auto;
}
But this margin still remains. I also tried to
<Navbar style={{ width: "auto" }}>
<Navbar.Header>
...
But no success. My complete code:
<Row>
<Navbar>
<Navbar.Header>
<Navbar.Brand className="lang-de">
<a href="/" />
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} href="#">
Impressum
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</Row>
you can use only React Bootstrap Fixed top
<Navbar fixed="top" />
It will auto create the CSS below:
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
You can see the this and another positions in documentation here
In your css, try the following:
.navbar > .container {
width:auto!important;
}
Just add "fluid" next to Navbar on your code
<Row>
<Navbar fluid>
<Navbar.Header>
<Navbar.Brand className="lang-de">
<a href="/" />
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} href="#">
Impressum
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
If you are using the grid system you can set the Container to fluid
<Container fluid>
<NavBar />
<Row>
<div>Personal Digital Assistants</div>
<ProfileCard text="Hello" info='unknown' imageTag={AlexaImg}/>
<ProfileCard text="Sir" info='unknown' imageTag={CortanaImg}/>
<ProfileCard text="Google thing" info='known' imageTag={SiriImg}/>
</Row>
</Container>