Hey there, I'm looking to create a toolbar with an image in the background. To achieve this, I've created two separate components. First up is the image component:
import React from 'react';
import thepic from '../mypic.jpg'; // import statement
import '../App.css';
const Image = () => {
return (
<img src={thepic} className='the-pic' />
)
}
export default Image;
Next, we have the toolbar component where I've used react-bootstrap toolbar and wrapped the previous image component inside:
<Image>
<Navbar>
<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>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</Image>
I've successfully displayed the image on the screen, but the toolbar doesn't seem to be showing up. It looks like the image is overriding the toolbar.
Any suggestions on how to fix this?