Menu icon Foundation
Top bar right nav link hiding for small screen

I'm trying to do something that would seem like it should be very simple. I just want a "Sign In" link to display on the right side of my app header for anonymous users regardless of screen or viewport size, like this.

Mockup

However, for a small viewport/screens the link becomes hidden no matter what I try. When inspecting the rendered page, it appears the link is still there but is being pushed down(?) below the top bar.

Screen shot 2014 03 17 at 11.29.49 am

This is my markup (This is a Rails 4 app and I am using Foundation via Sass/Compass.)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="My App">
  <title><%= content_for?(:title) ? yield(:title) : "My App" %></title>
  <%= stylesheet_link_tag "application", "data-turbolinks-track" => true  %>
  <%= javascript_include_tag "vendor/modernizr" %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
  <%= favicon_link_tag %>
</head>
<body>
 <nav class="top-bar show-for-small" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
  </ul>
  <section class="top-bar-section">
    <ul class="right">
      <li><a href="#">Sign In</a></li>
    </ul>
  </section>
</nav>
<section role="main" class="main-section">
    <div class="six columns centered">
      <h2>Main Content</h2>
    </div>
  </section>
</body>
</html>    

         
            

         

I've also added the following overrides to always get a mobile layout

$topbar-breakpoint:9999px; // Change to 9999px for always mobile layout
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})";
            

         

However, the signup link still does not appear :-/

Screen shot 2014 03 17 at 11.27.45 am

Any advice as to what I'm doing wrong would be very much appreciated!

-Anders

topbar

I'm trying to do something that would seem like it should be very simple. I just want a "Sign In" link to display on the right side of my app header for anonymous users regardless of screen or viewport size, like this.

Mockup

However, for a small viewport/screens the link becomes hidden no matter what I try. When inspecting the rendered page, it appears the link is still there but is being pushed down(?) below the top bar.

Screen shot 2014 03 17 at 11.29.49 am

This is my markup (This is a Rails 4 app and I am using Foundation via Sass/Compass.)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="My App">
  <title><%= content_for?(:title) ? yield(:title) : "My App" %></title>
  <%= stylesheet_link_tag "application", "data-turbolinks-track" => true  %>
  <%= javascript_include_tag "vendor/modernizr" %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
  <%= favicon_link_tag %>
</head>
<body>
 <nav class="top-bar show-for-small" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
  </ul>
  <section class="top-bar-section">
    <ul class="right">
      <li><a href="#">Sign In</a></li>
    </ul>
  </section>
</nav>
<section role="main" class="main-section">
    <div class="six columns centered">
      <h2>Main Content</h2>
    </div>
  </section>
</body>
</html>    

         
            

         

I've also added the following overrides to always get a mobile layout

$topbar-breakpoint:9999px; // Change to 9999px for always mobile layout
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})";
            

         

However, the signup link still does not appear :-/

Screen shot 2014 03 17 at 11.27.45 am

Any advice as to what I'm doing wrong would be very much appreciated!

-Anders

This post has been closed. No new replies can be added.

Jonathan Devine over 5 years ago

The topbar is severely resistant to being messed with. This might be one of those rare cases where you should have it outside of topbar and position it absolutely.

Anders Ramsay over 5 years ago

Ok, thanks, I'll consider doing something like absolute positioning. However, to me, what I'm doing doesn't seem like I'm messing with the topbar. I'm merely trying to display a single link in a small screen view.

Rafi Benkual over 5 years ago

This is the way topbar is made to work. The right side <li>'s are meant to be folded into the mobile menu so that is why it disappears from the topbar on small. See demo http://cdpn.io/JAdIL

What you can do is put the log in button on the left section and position it.
Here is an example with an image http://codepen.io/rafibomb/full/Abxwz

Anders Ramsay over 5 years ago

Ok, so I discovered what the issue was.

 <%= javascript_include_tag "application" %>

Was placed in the part of my application.html.erb layout file rather than just before the tag.