Menu icon Foundation
Rails 4 Foundation has-dropdown link breaking top bar when clicked

Code for my _nav.html.erb file. Everything is working except when I click on My Account which is just pointing to # it screws up the top bar. I have turbo links disabled already.. anyone know what's up with this? Using foundation 5 rails gem and haven't customized any css in the top bar. Added before/after pics

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><%= link_to "Store", '/' %></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="right">
      <li><%= link_to "Catalog", '#' %></li>
      <li class="divider"></li>
      <% if !signed_in? %>
      <li><%= link_to "Register", register_path %></li>
      <li class="divider"></li>
      <li><%= link_to "Sign In", signin_path %></li>
      <% else %>
      <li class="has-dropdown">
        <%= link_to "My Account", '#' %>
        <ul class="dropdown">
          <li><%= link_to "Profile", current_customer %></li>
          <li><%= link_to "Settings", edit_customer_path(current_customer) %></li>
          <li><%= link_to "Images", '#' %></li>
          <li><%= link_to "Orders", '#' %></li>
        </ul>
      </li>
      <li><%= link_to "Sign Out", signout_path, method: "delete" %></li>
      <% end %>
    </ul>

  </section>
</nav>
            

         

Railsbefore

Rails after

railsdropdowntopbar

Code for my _nav.html.erb file. Everything is working except when I click on My Account which is just pointing to # it screws up the top bar. I have turbo links disabled already.. anyone know what's up with this? Using foundation 5 rails gem and haven't customized any css in the top bar. Added before/after pics

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><%= link_to "Store", '/' %></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="right">
      <li><%= link_to "Catalog", '#' %></li>
      <li class="divider"></li>
      <% if !signed_in? %>
      <li><%= link_to "Register", register_path %></li>
      <li class="divider"></li>
      <li><%= link_to "Sign In", signin_path %></li>
      <% else %>
      <li class="has-dropdown">
        <%= link_to "My Account", '#' %>
        <ul class="dropdown">
          <li><%= link_to "Profile", current_customer %></li>
          <li><%= link_to "Settings", edit_customer_path(current_customer) %></li>
          <li><%= link_to "Images", '#' %></li>
          <li><%= link_to "Orders", '#' %></li>
        </ul>
      </li>
      <li><%= link_to "Sign Out", signout_path, method: "delete" %></li>
      <% end %>
    </ul>

  </section>
</nav>
            

         

Railsbefore

Rails after
eric kornmeyer over 5 years ago

I even tried changing # on My Account to an actual link and it still does the same thing.. and doesn't take me to the link

Rebecca Walsh over 4 years ago

Did this ever get resolved? Any solutions? I'm having the same problem and it's driving me nuts.

Rafi Benkual over 4 years ago

Not sure why - are you using Turbo links?