I have used react Bootstrap navbar also used react-scroll for smooth navigation. It's working fine but navbar is not collapsing when clicking any nav item in the responsive mode.
Packages
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import { Link } from "react-scroll";
import { LinkContainer } from "react-router-bootstrap";
import { Navbar, Container, NavDropdown, Nav, Dropdown } from "react-bootstrap";
Navbar
<Navbar
sticky="top"
id="navbar"
bg="light"
expand="lg"
className="navbar navbar-expand-lg navbar-light bg-light"
collapseOnSelect={true}
>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Link
activeClass="active"
to="features"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
onClick={this.closeNavbar}
>
Features
</Link>
<Link
activeClass="active"
to="about"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
>
About
</Link>
</Nav>
</Navbar.Collapse>
</Navbar>
Had the same issue. I found that "collapseOnSelect" works if we add "eventKey" for Nav.Link item
Example:
import { Link } from 'react-router-dom';
import { Nav, Navbar} from 'react-bootstrap';
<Navbar collapseOnSelect expand="lg">
<Navbar.Toggle />
<Navbar.Collapse>
<Nav className="mr-auto d-block">
<Nav.Item>
<Nav.Link eventKey="1" as={Link} to="/Home">
Home
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="2" as={Link} to="/Contant">
Page Contant
</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Navbar>
I had the same issue and resolved it by putting Bootstrap's Nav.Link back in. Here's how it would work based on your code :
<Navbar sticky="top" id="navbar"className="navbar" collapseOnSelect bg="light expand="lg">
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link>
<Link
activeClass="active"
to="features"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
>
Features
</Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
it's know issue in React Bootstrap that when we clicked on menu item it will not hide the menu automatically, below mentioned code help you to achieve the same.
An easy workaround that doesn't require jQuery:
<DropdownButton title={buttonTitle} onSelect={() => null}>
or if you're still using ES5:
<DropdownButton title={buttonTitle} onSelect={function() {}}>
It doesn't seem to matter what the onSelect callback returns.
I had the same problem, found a fix.
It is must to add expand attribute to your Navbar Component.
<Navbar variant="dark" expand="lg">
just use eventKey="2" inside <Nav.link/> . It will works fine for react js .
Related
I used the react router bootstrap element 'linkContainer' to try and create a hyperlink leading to the '/courses' page but the browser returns a blank page with the following error in the console: React.children.only expected to receive a single react element child.
at Object.onlyChild [as only]
at LinkContainer
import React from 'react';
import { Container, Nav, Navbar, NavDropdown, Offcanvas } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap'
function Header() {
return (
<header>
<Navbar bg="black" variant= "dark" expand='lg' className="py-4 border border-0">
<Container fluid>
<LinkContainer to='/'>
<Navbar.Brand> Market Snipers Academy </Navbar.Brand>
</LinkContainer>
<Navbar.Toggle aria-controls={`offcanvasNavbar-expand`} />
<Navbar.Offcanvas
id={`offcanvasNavbar-expand`}
aria-labelledby={`offcanvasNavbarLabel-expand`}
placement="end"
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id={`offcanvasNavbarLabel-expand`}>
Market Snipers Academy
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav variant='pills' className="justify-content-start flex-grow-1 pe-3 rounded">
<LinkContainer to='/courses'> <Nav.Link>Courses</Nav.Link> </LinkContainer>
<NavDropdown
title="Dropdown"
id={`offcanvasNavbarDropdown-expand`}
>
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
<NavDropdown.Item href="#action4">
Another action
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action5">
Something else here
</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav>
<Nav.Link href="#deets">Login</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Signup
</Nav.Link>
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
</header>
)
}
export default Header
When I expand the navBar by clicking the menu button, I want the dropdown has full height(100vh etc), the UI should be like this:

This is the current UI in mobile:
How can I do it?
App.js
import React from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import NavDropdown from "react-bootstrap/NavDropdown";
import Container from "react-bootstrap/Container";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.scss";
function Header(props) {
return (
<>
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link 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>
</Navbar.Collapse>
</Container>
</Navbar>
<div>content</div>
</>
);
}
export default Header;
Codesandbox:
https://codesandbox.io/s/fervent-leftpad-3sejn?file=/src/App.js
change css :
#media(max-width:600px) {
.navbar {
min-height: 100vh;
align-items: flex-start;
}
}
I am new to Nextjs. I have to have an active className when a nav-link is selected. I am using Nextjs+react-bootstrap in my project. The feature I want to implement is when someone clicks on a specific link it's colour should be changed
my Navbar component looks like this -
import React from "react";
import { Navbar, Nav, Button } from "react-bootstrap";
import Link from "next/link";
import "../../styles/Header.module.css";
const Header = () => {
return (
<div className="header">
<Navbar expand="lg">
<Link href="/">
<Navbar.Brand style={{ padding: "8px 50px" }}>
<img
src="/logo.svg"
left="60px"
top="25px"
width="112px"
height="23px"
className="d-inline-block align-top"
alt="Openhouse logo"
/>
</Navbar.Brand>
</Link>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
<Nav className="ml-auto">
<Link href="/classes" passHref>
<Nav.Link style={{ padding: "8px 50px" }}>Classes</Nav.Link>
</Link>
<Link href="/clubs" passHref>
<Nav.Link style={{ padding: "8px 50px" }}>Clubs</Nav.Link>
</Link>
<Link href="/aboutUs" passHref>
<Nav.Link style={{ padding: "8px 50px" }}>AboutUs</Nav.Link>
</Link>
</Nav>
<Button variant="warning" size="sm">
Chat with us
</Button>
</Navbar.Collapse>
</Navbar>
</div>
);
};
export default Header;
This special version of the Link tag is called NavLink and adds styling attributes to the rendered element when it matches the current URL
The class is given to the element when it is active by writing:
<NavLink to="/about" activeClassName="active">
About
</NavLink>'
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.
Try this:
.nav-link{
font-family: 'Roboto', sans-serif;
color: #2699FB !important;
}
inside "{}" put what you want, do not forget the "!important"
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 ; }
This may be too late. But may help someone in the future. Override this bootstrap CSS class.
.navbar-dark .navbar-nav .nav-link
{
color:#fff;
}
Late to the party but this done the trick for me
<Nav.Link href="/" style={{color:"white"}}>Log out</Nav.Link>
I want to add Navigation Bar to my website using Bootstrap in ReactJS. But all NavItems are on separate lines. How to put them on one line. I followed the guide in Bootstrap docs.
Output image
import React, { Component } from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
class Header extends Component {
render() {
return(
<div className="Header">
<Navbar inverse collapseOnSelect>
<Navbar.Header>
</Navbar.Header>
<Navbar.Collapse>
<Nav pullLeft>
<NavItem eventKey={1} href="#">
Link1
</NavItem>
<NavItem eventKey={2} href="#">
Link2
</NavItem>
</Nav>
<Nav pullRight>
<NavItem eventKey={1} href="#">
Link3
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
}
export default Header;
You need to add de css to your index.html, from your package or from the CDN.
check this Link for more info
[Working Demo is here] codesendbox