<div data-sticky-container>
  <div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
    <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
      <button class="menu-icon" type="button" data-toggle></button>
      <%= link_to(image_tag("ama-logo-small.svg", class: "topbar-logo"), "https://www.ama.ab.ca") %>
    </div>
    <div class="top-bar" id="main-menu">
      <div class="top-bar-left">
        <%= link_to(image_tag("ama-logo-small.svg", class: "topbar-logo show-for-medium"), "https://www.ama.ab.ca") %>
      </div>
      <div class="top-bar-right">
        <ul class="menu" data-responsive-menu="drilldown medium-dropdown">
          <%= render partial: "ama_layout/main_top_nav_item", collection: navigation.items, as: :nav_item %>
          <li>
            <a href="<%= Rails.configuration.gatekeeper_site %>/help" target="_blank">Help</a>
          </li>
          <li>
            <a href="<%= Rails.configuration.amaabca_site %>/membership/contact-us--centre-locations-hours-and-contact-information">Contact Us</a>
          </li>
          <%= navigation.top_nav %>
          <li class="show-for-small-only">
            <a href="<%= Rails.configuration.amaabca_site %>">AMA Website</a>
          </li>
          <li class="show-for-small-only">
            <a href="http://amaroadreports.ca/">AMA Road Reports</a>
          </li>
          <%= navigation.sign_out_link %>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="javascript_errors error_notification" hidden></div>
<noscript>
  <div class="mt1 large-12 columns text-center error_notification">
    <h2 class="mt1">There seems to be an issue with your browser.</h2>
    <h5>Javascript is disabled in your web browser.</h5>
    <div class='fieldset text-center small mb1 block'>
      For full functionality of this site it is necessary to enable JavaScript. Here are the <a href="http://www.enable-javascript.com/" target="_blank"> instructions how to enable JavaScript in your web browser</a>
    </div>
  </div>
</noscript>