Ruby on Rails: How Do I Keep a Clicked link_to_current_unless from appearing outside of the Nav Bar?

Question

I have a nav bar with several links right justified along with two locale links just to the right of the brand name that display when it's not a specific URL. When I click the links right justified the links stay in the same position. When I click one of the locale links on the left the link I clicked shows as clicked but it above the nav bar.

This is what the screen looks like when the website is initially displayed.

This is what the screen looks like when the French link is clicked. It may be hard to see but the French link appears in a slightly larger font underlined. I want it to appear like the links to the right do when I click them.

Here is the code I have for the nav bar. I've also had the if statement within the container-fluid div and inbetween the two divs. I still get the same result.

<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to "#{t :geometry3d2d}", locale_root_path, class: "navbar-brand"  %>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">    

      <% if "#{request.host_with_port}" == "myrequesthost" %>
      <% else %>
        <ul class="nav navbar-nav">
          <li><%= link_to_unless_current "#{t :english}", locale: "en" %></li>
          <li><%= link_to_unless_current "#{t :french}", locale: "fr" %></li>
        </ul>
      <% end %>

      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "#{t :link_home}", locale_root_path %></li>
        <li><%= link_to "#{t :link_store}", store_path %></li>
        <li><%= link_to "#{t :link_books}", store_path(anchor: "#{t :books}") %></li>
        <li><%= link_to "#{t :link_tesserart}", store_path(anchor: "tesserart") %></li>
        <li><%= link_to "#{t :link_affiliates}", affiliates_path %></li>
        <li><%= link_to "#{t :link_geometry}", geometry_path %></li>
        <li><%= link_to "#{t :link_terms}", terms_path %></li>
        <li><%= link_to "#{t :link_vision}", locale_root_path(anchor: "vision") %></li>
        <li><%= link_to "#{t :link_contact}", contact_path %></li>
      </ul>
    </div>
  </div>
</nav>
<%= content_tag(:div, content_tag(:a, "", id: "top"), class: "anchor") %>

I have not found anything related to this issue in my web searching. The only differences between the <ul> in the if statement and the other one is: (1) I'm using link_to_unless_current instead of link_to and (2) I don't include class navbar-right. I hope that adding a class may correct this problem but not sure where to look.

It looks like the click is adding a class (maybe active or something?) that changes the color and margin/padding of that element. Have you inspected it to see where those styles are coming from yet? — Rockwell Rice, May 21 '17 at 17:11
I did a search in my views, stylesheet and javascript but did not find any references to current. This is why I submitted the question. I thought I was missing something. I found out what happened by rereading the differences I posted in my question. — Pamela Cook - LightBe Corp, May 21 '17 at 18:24

score 0 · Answer 1 · answered May 21 '17 at 18:29

I normally use link_to_unless_current the selected locale link is protected and the other locale links show up as links. That functionality is not important for this project.

I decided to take another look at the differences I noted in my <ul> statement. I decided to change link_to_unless_current to link_to to see what happened. The locale links are behaving like the ones on the right of the nav bar and switches between English and French.

Ruby on Rails: How Do I Keep a Clicked link_to_current_unless from appearing outside of the Nav Bar?

1 Answers1