Base 5 top drum 'sticky_class' error

Using extended code from Zurb Foundation 5 docs:

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
  <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
          <li class="active"><a href="#">Active link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

I get the following error in the console: 'Uncaught TypeError: Cannot read the' sticky_class 'property from undefined'

Also, when I expand the dropdown menu, I get this error: "Missed TypeError: Cannot read the property" dropdown_autoclose "from undefined '

I checked the foundation.toolbar.js file, and both of them seem to be installed inside the "settings":

settings : {
  index : 0,
  start_offset : 0,
  sticky_class : 'sticky',
  custom_back_text : true,
  back_text : 'Back',
  mobile_show_parent_link : true,
  is_hover : true,
  scrolltop : true, // jump to top when sticky nav menu toggle is clicked
  sticky_on : 'all',
  dropdown_autoclose: true
},

Can anyone help with this?

+4
source share

All Articles