I'm trying to add a circular profile picture to my react-bootstrap nav bar.
Similar to this:
But I'm not sure where to add the div for the circular image.
Here is my navbar code:
import { Link } from "react-router-dom";
import NavDropdown from 'react-bootstrap/NavDropdown';
import { Navbar, Nav, Container } from 'react-bootstrap';
const NavBar = (props) => {
const user = 'Petrina.C'
return (
<>
<Navbar expand="lg">
<Container style={{maxWidth:'100%'}}>
<Navbar.Brand href="#home">Voter Outreach</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto" id="navLinks">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/voters">Voters</Nav.Link>
<NavDropdown title={`${user}`} 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>
{props.children}
</>
);
}
export default NavBar;
Any help is appreciated!
You can put image and use class rounded-circle to make it like this:
<img src="..." class="rounded-circle" alt="...">
There are several properties available in React-Bootstrap docs.
You can simply pass the props as true if you want a property to be applied.
Example:
import Image from 'react-bootstrap/Image'
<Image src="..." roundedCircle={true}>
Or you can always use the CSS properties
import Image from 'react-bootstrap/Image'
<Image src="..." style={{ borderRadius: "50%", height: "100px", width: "100px" }} />
Related
Goal : display an iframe with a Youtube video and the user can click play/pause
Problem: I can't click on anything in my main content, but it works just fine if I put it in the Navigation component or the Footer component
What I've tried: I tried many debugging to finally found this was the issue, but now I can't figure out what to do
Here is the code of the Navigation component which works fine :
import React, { useState } from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import Container from "react-bootstrap/Container";
import { Link } from "react-router-dom";
import {NavLink} from "react-router-dom";
import {
AiOutlineHome,
} from "react-icons/ai";
import {Button} from "react-bootstrap";
function Navigation() {
const [expand, updateExpanded] = useState(false);
const [navColour, updateNavbar] = useState(false);
function scrollHandler() {
if (window.scrollY >= 20) {
updateNavbar(true);
} else {
updateNavbar(false);
}
}
window.addEventListener("scroll", scrollHandler);
return (
<Navbar
expanded={expand}
fixed="top"
expand="md"
className={navColour ? "sticky" : "navbar"}
>
<Container>
<Navbar.Brand href="/" className="d-flex">
<p style={{marginTop: "15px"}}><strong className="main-name"> D</strong>egen <strong className="main-name">B</strong>ounty <strong className="main-name">H</strong>unter</p>
</Navbar.Brand>
<Navbar.Toggle
aria-controls="responsive-navbar-nav"
onClick={() => {
updateExpanded(expand ? false : "expanded");
}}
>
</Navbar.Toggle>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="ms-auto" defaultActiveKey="#home">
<Nav.Item>
<Nav.Link as={Link} to="/" onClick={() => updateExpanded(false)}>
<AiOutlineHome style={{ marginBottom: "2px" }} /> Home
</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
export default Navigation;
Here is the code of the Whitepaper component which doesn't allow me to click on anything :
import React from "react";
import {Container, Row, Col} from "react-bootstrap";
import wp_1 from "../Assets/wp_1.png";
function Whitepaper() {
return (<section>
<Container fluid className="whitepaper-section" id="whitepaper">
<Container className="whitepaper-content">
<div>
<button onClick={() => alert("test")}>Add</button>
<iframe
src="https://www.youtube.com/embed/E7wJTI-1dvQ"
frameBorder="0"
allow="autoplay; encrypted-media"
allowFullScreen
title="video"
/>
{" "}
</div>
<Row>
<Col md={12}>
<img src={wp_1} alt="roadmap pic" className="img-fluid" style={{maxWidth: '50%'}}/>
</Col>
</Row>
</Container>
</Container>
</section>);
}
export default Whitepaper;
So once again, when I pass my cursor over the button or the iframe, the cursor shape doesn't change and I can't click. I can select text, select image and right click everywhere.
In the CSS file I looked for pointer-events: none; but I don't have anything like this
What is happening ?
The problem was in the css file I had :
z-index: -1;
Removed this line and it's working fine now
Total web dev noob here. Just integrated Bootstrap for the first time, and I'm using a set of Navbars gotten off this link : https://react-bootstrap.github.io/components/navbar/
I've noticed that, while the style is correct and everything looks normal, the text content of the Navbar is not filling the entire width of the Bar. picture shown below
[![enter image description here][1]][1]
Navbar File code extract
class Navsucks extends Component {
// componentDidMount() {
// }
render() {
return (
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark" >
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</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 href="#deets">More deets</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Dank memes
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
}
App.js code extract
class App extends Component {
state = { posty: []}
componentDidMount() {
}
render() {
return (
<div className="App">
<Navsucks> </Navsucks>
<header className="App-header">
<Texts> asdasd </Texts>
</header>
</div>
);
}
}
export default App;
I really just want the left and right halves of the text to be hugging the screen edges. Is this possible? Any help is much appreciated!
Thanks!
What im trying to do is a link between different components in my page, i have a component header with a bunch of links and i want to make reference to anotother component on the same page, in other words im trying to do the following thing but with react:
Hi!
<div id="#move">You have been moved</div>
This is what i have in the header component im using react-bootstrap, i've found some ways to do it without it but i need to do it with it
export default function Header() {
return (
<>
<Navbar variant="dark" expand="lg" style={{ "background-color": "#1A2A4E" }} sticky="top" >
<Navbar.Brand href="#home">Logo</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto" />
<Nav>
<LinkContainer to={{
hash:"Footer"
}}>
<Nav.Link href="#">Actividades</Nav.Link>
</LinkContainer>
<Nav.Link href="#">Fechas</Nav.Link>
<Nav.Link href="#">Cursos</Nav.Link>
<Nav.Link href="#">Instalaciones</Nav.Link>
<Nav.Link href="#">Contacto</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</>
)
}
and then in the App the first link gets the Actividades but the href doesnt work the App component is:
function App() {
return (
<div className="App">
<div className="imagen-fondo" />
<div className="fondo-blaquesino" />
<div className="">
<Header Footer={<Footer/>} />
<Infoinicio />
</div>
<div className="">
<Actividades />
<Cursos />
<InscrCalendario />
<Instalaciones />
<Contacto />
<div id="#Footer" />
<Footer />
</div>
</div>
);
}
So, you want to auto scroll to the selected id, rite? I achieve it using <NavLink /> from reactstrap. Here is how it works
NavigationBar.tsx
import React, { useState } from 'react';
import { withRouter } from 'react-router-dom';
import {
Navbar, NavbarToggler, Collapse,
Nav, NavItem, NavLink,
} from 'reactstrap';
import { HistoryProps } from '../../interfaces';
import './TopBar.scss';
function NavigationBar(props: HistoryProps) {
const [isOpen, setIsOpen] = useState(false);
const toggleNav = () => setIsOpen(!isOpen);
const path = props.history.location.hash;
return (
<Navbar expand="md" className="navbar-wrapper">
<NavbarToggler
onClick={toggleNav}
data-testid="navbar-toggler"
className="navbar navbar-light outline-none"
/>
<Collapse isOpen={isOpen} navbar data-testid="navbar-collapse" className="h-100">
<Nav className="ml-auto h-100" navbar>
<NavItem className="navbar-navitem pl-2 pr-2" active={!path || path.includes('#about-me')}>
<NavLink className="font-size-12" href="#about-me">
About Me
</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
);
}
export default withRouter(NavigationBar);
And defined the target component/element, in my case, in another component.
LandingPage.tsx
import React from 'react';
import { Row } from 'reactstrap';
import './LandingPage.scss';
export default function LandingPage() {
return (
<div className="container-fluid">
<Row className="about-me-wrapper id-wrapper" id="about-me">
{/* Element here */}
</Row>
</div>
);
}
I want to change the content of the collapsed Navbar but can't find any props or events for it.
Here is my Navbar with Dropdown in non collapsed state.
And collapsed Navbar. Need to change Dropdown for something else.
Sample code
<Navbar expand="sm" bg="primary" variant="dark" fixed="top">
<Navbar.Toggle aria-controls="responsive-navbar-nav"/>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="ml-auto">
<NavDropdown>
<NavDropdown.Item>Profile</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item>Log out</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
How to do it in a proper way?
Thanks in advance!
I was able to do this by binding to the onToggle function of the Navbar and using it to set a boolean.
const Header = () => {
const [expanded, setExpanded] = useState(false)
const setToggle = () => {
console.log('toggle');
setExpanded(true)
}
return (
<Navbar expand="sm" onToggle={setToggle}>
<Navbar.Toggle aria-controls="responsive-navbar-nav"/>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="ml-auto">
{expanded && <NavDropdown>
<NavDropdown.Item>Profile</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item>Log out</NavDropdown.Item>
</NavDropdown>}
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
So I am trying to make the dropdown in the below code work with javascript as I noticed that the CSS code will only trigger the dropdown after a user first clicks on the dropdown. after that, it will let the css hover code work as per normal.
So needing a Javascript way to get this drop down to work.
import React, { useState } from "react";
import {Nav, Navbar, NavDropdown, ButtonToolbar, Button } from "react-bootstrap";
import { withRouter } from "react-router";
import '../App.css';
const Header = props => {
const { location } = props;
function changeBackground(e) {
e.target.children('[data-toggle="dropdown"]').click();
}
return (
<Navbar bg="transparent" variant="dark" expand="lg">
<Navbar.Brand href="#home" className="App-logo">AdStichr</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto" activeKey={location.pathname}>
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/advertisers">Advertisers</Nav.Link>
<NavDropdown title="Publishers" id="basic-nav-dropdown" alignRight
onMouseOver={changeBackground}>
<NavDropdown.Item href="/publishers/radio">Radio Stations</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/podcasters">Audio Podcasters</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/videopodcasters">Video Podcasters</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="/case-studies">Case Studies</Nav.Link>
<ButtonToolbar>
<Button href="/contact" variant="success" size="lg" className="button-round">
Contact Us
</Button>
</ButtonToolbar>
</Nav>
</Navbar.Collapse>
</Navbar>
);
};
const HeaderWithRouter = withRouter(Header);
export default HeaderWithRouter;
Opening the dropdown menu by hovering is not supported in React Bootstrap (here is an explanation: https://github.com/react-bootstrap/react-bootstrap/issues/4042).
If you'd like to achieve that you have to use the classic dropdown menu (implemented using NavItem so it works the same as the usual NavDropdown). You should be able to use the show property of Dropdown.Menu - but that doesn't seem to work perfectly either so I had to improvise a bit (hiding/removing the dropdown.menu based on state).
Here is a working example using Dropdown.Menu instead of NavDropdown (but with the same properties): https://codesandbox.io/s/falling-cookies-10joi
The main code difference is, as I explained above, using the Dropdown component instead of NavDropdown to be able to use the show property:
<Dropdown as={NavItem} alignRight onMouseLeave={closeMenu}>
<Dropdown.Toggle
id="basic-nav-dropdown"
as={NavLink}
onMouseEnter={openMenu}
>
Publishers
</Dropdown.Toggle>
{menuOpen && (
<Dropdown.Menu show={true}>
<NavDropdown.Item href="/publishers/radio">
Radio Stations
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/podcasters">
Audio Podcasters
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/videopodcasters">
Video Podcasters
</NavDropdown.Item>
</Dropdown.Menu>
)}
</Dropdown>
We need to change our changeBackground function like this, to auto click the dropdown button on onMouseOver event:
changeBackground = (e) => {
e.target.click();
};
This will click the dropdown button and open the dropdown menu.
Please let me know if you need further information.