title: I'm trying to close the offcanvas menu in React Bootstrap when I click a link
body: <p>I'm using a combination of React Bootstrap and React, to make a single page application, I've tried a few methods to get the Offcanvas menu to close when I click a link. I tried making an inline script on the link that toggles the menu, but what I found is the menu closes as I want it to but then the link only takes me halfway to where it should navigate to.</p>
  <p>this is my code so far:</p>
  <pre><code>import React from &quot;react&quot;;
  import { Navbar, Nav, Container, Offcanvas } from &quot;react-bootstrap&quot;;
  import { StaticImage } from &quot;gatsby-plugin-image&quot;;
  import styled from &quot;styled-components&quot;;
  import { Link } from &quot;gatsby&quot;;
  
  const Wrapper = styled.div`
    background-color: #9ac2ba;
    .Nav-Brand {
      display: flex;
    }
    .navbar {
      background-color: #9ac2ba;
    }
  `;
  
  const LinkWrapper = styled.div`
    margin-top: 20px;
    font-size: 1.5rem;
    text-align: center;
    color: #333;
    .nav-link {
      color: #333;
    }
    .nav-link:hover {
      color: #000;
    }
  `;
  
  const Navigation = () =&gt; {
    return (
      &lt;Wrapper&gt;
        &lt;Navbar
          as=&quot;nav&quot;
          variant=&quot;light&quot;
          fixed=&quot;top&quot;
          expand={false}
          className=&quot;shadow&quot;
        &gt;
          &lt;Container&gt;
            &lt;Navbar.Brand href=&quot;/&quot; className=&quot;Nav-Brand&quot;&gt;
              &lt;StaticImage
                src=&quot;../images/Spf-Brand-01.jpg&quot;
                alt=&quot;Brand Image&quot;
                layout=&quot;constrained&quot;
                placeholder=&quot;blurred&quot;
                height={50}
                loading=&quot;eager&quot;
              /&gt;
              &lt;h1 className=&quot;visually-hidden&quot;&gt;
                SPF Paint &amp;amp; Decorating, Birmingham
              &lt;/h1&gt;
            &lt;/Navbar.Brand&gt;
            &lt;Navbar.Toggle
              aria-controls=&quot;offcanvasNavbar&quot;
              aria-labelledby=&quot;offcanvasNavbarLabel&quot;
            /&gt;
            &lt;Navbar.Offcanvas id=&quot;offcanvasNavbar&quot; placement=&quot;start&quot;&gt;
              &lt;Offcanvas.Header closeButton&gt;
                &lt;Offcanvas.Title id=&quot;offcanvasNavbarLabel&quot;&gt;
                  &lt;span className=&quot;visually-hidden&quot;&gt;SPF Nav Menu&lt;/span&gt;
                &lt;/Offcanvas.Title&gt;
              &lt;/Offcanvas.Header&gt;
              &lt;Offcanvas.Body&gt;
                &lt;Nav className=&quot;justify-content-end flex-grow-1 pe-3&quot;&gt;
                  &lt;StaticImage
                    src=&quot;../images/Spf-Brand-01.jpg&quot;
                    alt=&quot;Brand Image&quot;
                    layout=&quot;constrained&quot;
                    placeholder=&quot;blurred&quot;
                    height={50}
                    loading=&quot;eager&quot;
                    className=&quot;offcanvas-brand&quot;
                  /&gt;
                  &lt;LinkWrapper&gt;
                    &lt;Link to=&quot;/&quot; className=&quot;nav-link&quot;&gt;
                      Home
                    &lt;/Link&gt;
                    &lt;Link to=&quot;/#services&quot; className=&quot;nav-link&quot;&gt;
                      Services
                    &lt;/Link&gt;
                    &lt;Link to=&quot;/#faq&quot; className=&quot;nav-link&quot;&gt;
                      FAQ
                    &lt;/Link&gt;
                    &lt;Link to=&quot;/#contact&quot; className=&quot;nav-link&quot;&gt;
                      Contact
                    &lt;/Link&gt;
                  &lt;/LinkWrapper&gt;
                &lt;/Nav&gt;
              &lt;/Offcanvas.Body&gt;
            &lt;/Navbar.Offcanvas&gt;
          &lt;/Container&gt;
        &lt;/Navbar&gt;
      &lt;/Wrapper&gt;
    );
  };
  
  export default Navigation;
  </code></pre>
  <p>this is the build of the site:  <a href="https://pland.netlify.app/" rel="nofollow noreferrer">https://pland.netlify.app/</a></p>