0

I am using React Bootstrap and I'm trying to get my Logo inside my Navbar using Navbar.brand.

I was hoping my logo would appear in the top left of the screen.

I've tried

<Navbar.Brand href={logo}></Navbar.Brand>

<Navbar.Brand href="logo"></Navbar.Brand>

<Navbar.Brand><a href={logo}/></Navbar.Brand>

<Navbar.Brand><a href="logo/></Navbar.Brand>

and none seem to work.

(My logo is black)

Here is my Github for it: https://github.com/Shaneeyb/Kingdom-Man

Here is my Navbar's code:

import React from "react";
import {
  Navbar,
  Nav,
  Offcanvas,
  Container,
} from "react-bootstrap";
import {
  BrowserRouter as Router,

} from "react-router-dom";
//import Logo from "/assets/images/logo"

import logo from "../images/logo.png";

function NavbarComp() {
  return (
    <div>
      <div>
        <Navbar bg="light" expand={false}>
          <Container fluid>
            <Navbar.Brand href={logo}></Navbar.Brand>
            <Navbar.Toggle aria-controls="offcanvasNavbar" />
            {/* Navbar Offcampus creates the hamburger menu */}
            <Navbar.Offcanvas
              id="offcanvasNavbar"
              aria-labelledby="offcanvasNavbarLabel"
              placement="end"
            >
              <Offcanvas.Header closeButton></Offcanvas.Header>
              <Offcanvas.Body>
                <Router>
                  <Nav navbar className="justify-content-end flex-grow-1 pe-3">
                    <Nav.Link href="/"> Home</Nav.Link>{" "}
                    <Nav.Link href="/Camp"> Camp</Nav.Link>{" "}
                    <Nav.Link href="/About"> About</Nav.Link>
                    <Nav.Link href="/GetInvolved"> Get Involved</Nav.Link>
                  </Nav>
                </Router>
              </Offcanvas.Body>
            </Navbar.Offcanvas>
          </Container>
        </Navbar>
      </div>
    </div>
  );
}

export default NavbarComp;

Here is the Screenshot of the code and browser:

screenshot of the code and browser

isherwood
  • 58,414
  • 16
  • 114
  • 157
Shaneeyb
  • 125
  • 2
  • 9
  • 1
    `logo` is an _image_, not an anchor. Use it as such. See https://stackoverflow.com/questions/39999367/how-do-i-reference-a-local-image-in-react – isherwood Feb 15 '22 at 22:31

1 Answers1

1

Your logo is an image, try:

<Navbar.Brand>
  <img src={logo} />
</Navbar.Brand>
Avi
  • 1,049
  • 1
  • 5
  • 16
  • This worked but now It's huge and taking up more than my entire page. Would I have to use CSS to make it smaller or is there a way to make It responsive to the size of the navbar?? – Shaneeyb Feb 16 '22 at 02:05
  • Yes you would need to use CSS for that or `height` `width` attributes on the element itself – Avi Feb 16 '22 at 09:20