Attempt to restyle

app/views/layouts/_header.html.haml

@@ -4,8 +4,8 @@
       = image_tag("pear.png", class: 'logo', alt: 'Growstuff brand logo (drawing of a pear)')
       .d-none.d-md-block
         %span.site-name Growstuff
+    %button.navbar-toggler{ "aria-controls" => "navbarSupportedContent", "aria-expanded" => "false", "aria-label" => "Toggle navigation", "data-bs-target" => "#navbarSupportedContent", "data-bs-toggle" => "offcanvas", type: "button" }
+      %i.fas.fa-ellipsis-v.navbar-toggler-icon
   .nav= render 'crops/search_bar'
   .nav
-    %button.navbar-toggler{ "aria-controls" => "navbarSupportedContent", "aria-expanded" => "false", "aria-label" => "Toggle navigation", "data-bs-target" => "#navbarSupportedContent", "data-bs-toggle" => "collapse", type: "button" }
-      %i.fas.fa-ellipsis-v.navbar-toggler-icon
     = render 'layouts/menu'

app/views/layouts/_menu.haml

@@ -1,4 +1,4 @@
-#navbarSupportedContent.collapse.navbar-collapse
+#navbarSupportedContent.offcanvas.offcanvas-top
   %ul.navbar-nav.mr-auto
     - if signed_in?
       %li.nav-item