Bootstrap导航栏切换(汉堡菜单)仅在刷新页面时显示

时间:2019-06-15 00:04:37

标签: jquery css ruby-on-rails twitter-bootstrap bootstrap-4

Navbar汉堡包菜单仅在用户刷新页面时显示。现在确定它可能是什么,或者这是一个jQuery问题。可能是个turbolink问题,但是我不是最好的引导程序,所以我想尝试一下这个问题解答板。

我也确实安装了gem boostrap,并且也将其导入到我的scss文件和application.js文件中

 <header id="header-wrap">
  <!-- Navbar Start -->
  <nav class="navbar navbar-expand-lg fixed-top scrolling-navbar">
    <%= link_to image_tag("logo2.png"), root_path, :class=>'navbar-brand' %>
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          <span class="lni-menu"></span>
          <span class="lni-menu"></span>
          <span class="lni-menu"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="main-navbar">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <%= link_to 'Home', root_path, class: 'nav-link' %>
          </li>
          <li class="nav-item">
            <%= link_to 'Categories', categories_path, class: 'nav-link' %>
          </li>
          <li class="nav-item dropdown">
            <%= link_to 'Business Directory', business_directory_path, class: 'nav-link dropdown-toggle' %>
          </li>
          <li class="nav-item dropdown">
            <%= link_to 'Partners', partner_path, class: 'nav-link dropdown-toggle' %>
          </li>
          <li class="nav-item">
            <%= link_to 'News & Tech', blogs_path, class: 'nav-link' %>
          </li>
        </ul>
        <ul class="sign-in">
          <% if user_signed_in? %>
            <li class="nav-item dropdown">
              <%= link_to 'My Account', edit_user_registration_path, :class => 'nav-link dropdown-toggle', 'aria-haspopup' => 'true', 'aria-expanded' => 'false' %>
              <div class="dropdown-menu">
                <%= link_to 'My Ads', myads_path, class: 'dropdown-item' %>
                <%= link_to 'Inbox', conversations_path, class: 'dropdown-item' %>
                <%= link_to 'Settings', edit_user_registration_path, class: 'dropdown-item' %>
                <%= link_to 'Logout', destroy_user_session_path, method: :delete, :class => 'dropdown-item' %>
              </div>
            </li>
            <% else %>
            <li>
              <%= link_to 'Login', new_user_session_path, :class => 'nav-link' %> 
              <%= link_to 'Register', pricing_path, :class => 'nav-link' %>
            </li>
          <% end %>
        </ul>
        <%= link_to 'Post Ad', new_post_path, :class => 'tg-btn' %>
      </div>
    </div>

    <!-- Mobile Menu Start -->
    <ul class="mobile-menu">
      <li>
        <%= link_to 'Home', root_path %>
      </li>
      <li>
        <%= link_to 'Catgeories', categories_path %>
      </li>
      <li>
        <%= link_to 'Business Directory', business_directory_path %>
      </li>
      <li>
        <%= link_to 'Partners', partner_path %>
      </li>
      <li>
        <%= link_to 'News & Tech', blogs_path %> 
      </li>
      <li>
        <%= link_to 'Post Ad', new_post_path %> 
      </li>
      <li>
        <% if user_signed_in? %>
        <%= link_to 'My Account', edit_user_registration_path %>
        <ul class="dropdown">
          <li><%= link_to 'My Account', edit_user_registration_path %></li>
          <li><%= link_to 'My Ads', myads_path %></li>
          <li><%= link_to 'Settings', edit_user_registration_path %></li>
          <li><%= link_to 'Logout', destroy_user_session_path, method: :delete %></li>
        </ul>
        <% else %>
         <li><%= link_to 'Login', new_user_session_path %></li>
         <li><%= link_to 'Register', pricing_path %></li>
        <% end %>
      </li>
    </ul>
    <!-- Mobile Menu End -->

  </nav>
</header>

0 个答案:

没有答案