bootstrap.offcanvas.jsを使ったとき、ユーザのログアウトができない

bootstrap.offcanvas.jsを使い、ハンバーガーメニューと左からスッと出てくるオフキャンバスメニューを作りました。
ハンバーガーメニューからオフキャンバスメニューを出したとき、deleteメソッドを用いたログアウトリンクをクリックしても、オフキャンバスメニューが閉じるだけでログアウトされません(ほかの通常のリンクは正常に動作します)。
横幅が大きいデバイスで表示したときには、ログアウトのリンクがheaderの部分に既に表示されており(ハンバーガーメニューではなくすでに表示されており)、それは問題なく反応します。
初学者のため、表現がわかりにくいかもしれませんが、ご教示いただければと思います。

環境：
Rails 5.1.6.1
Ruby 2.5.0
turbolinks 5.2.0
devise 4.5.0
bootstrap-sass 3.3.7
jquery-rails 4.3.3

bootstrap.offcanvas.jsとbootstrap.offcanvas.cssはgithubから最新版をダウンロードし、vendor/assets/javascriptsおよびvendor/assets/stylesheets以下に配置済み。

app/views/layout/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>PayjpEcsite</title>
    <%= csrf_meta_tags %>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <header>
      <div data-turbolinks="false">
        <button type="button" class="navbar-toggle offcanvas-toggle" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <nav class="navbar navbar-default navbar-offcanvas navbar-offcanvas-touch" role="navigation" id="js-bootstrap-offcanvas">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <ul class="nav navbar-nav">
                <% if user_signed_in? %>
                  <% if current_user.admin? %>
                    <li><%= link_to current_user.last_name + " " + current_user.first_name + "(Admin)", user_path(current_user) %></li>
                    <li><%=link_to "商品新規登録", new_product_path %></li>
                  <% else %>
                    <li><%= link_to current_user.last_name + " " + current_user.first_name + " 様の購入履歴", user_path(current_user) %></li>
                  <% end %>
                  <li><%= link_to '登録情報変更', edit_user_registration_path %></li>
                  <li><%= link_to 'ログアウト', destroy_user_session_path, method: :delete %></li>
                <% else %>
                  <li><%= link_to 'サインアップ', new_user_registration_path %></li>
                  <li><%= link_to 'ログイン', new_user_session_path %></li>
                <% end %>
            </ul>

          </div><!-- /.container-fluid -->
        </nav>
      </div>
    </header>

    <div class="container-fluid">
      <p class="notice"><%= notice %></p>
      <p class="alert"><%= alert %></p>
      <%= yield %>
    </div>
  </body>
</html>

######app/assets/javascripts/application.js

//= require rails-ujs
//= require turbolinks
//= require jquery
//= require jquery.jpostal
//= require bootstrap-sprockets
//= require bootstrap.offcanvas
//= require_tree .

######app/assets/stlesheets/application.js

*= require_tree .
*= require_self
*/
@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap.offcanvas";

header {
  height: 11px;;
}

.form-control-label {
  display: block;
}

.invalid-feedback {
  color: red;
}

他に必要な項目があれば、教えていただければ追記します。
よろしくおねがいたします。