Header Adjustments

Sometimes you can find pre-existing HTML and CSS snippets to quickly add a styled element to your site. Bootsnipp is a useful site for finding snippets that go along with the Bootstrap CSS framework. You can modify a Bootsnipp dropdown snippet to create an improved navigation bar on the top of your site:

app/views/layout/_navigation.html.erb

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <%= link_to 'Home', root_path, class: "navbar-brand" %>
    </div>

    <div class="collapse navbar-collapse" id="bs-slide-dropdown">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <% if user_signed_in? %>
                <li><%= link_to "Your Posts", user_path(current_user) %></li>
                <li><%= link_to 'Edit account', edit_user_registration_path %></li>
                <li><%= link_to 'Sign out', destroy_user_session_path, :method=>'delete' %></li>
            <% else %>
                <li><%= link_to 'Sign in', new_user_session_path %></li>
                <li><%= link_to 'Sign up', new_user_registration_path %></li>
            <% end %>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

In the above code, we no longer use the partial _navigation_links. You can either delete the file, or put the links back in it and render it above.

Note how the account sign up links were moved into a dropdown above. A visitor who isn't signed in is displayed options for signing up or in, while other relevant links are displayed to a user who is signed in. This includes a link to the user's own show page:

<li><%= link_to "Your Posts", user_path(current_user) %></li>