Responsive Navigation not working as expected in Rails 5.2

[avaldivi]

I am having issues with the responsive navigation rendering properly. I am not being thrown any errors in the console either. Could anyone identify or help with where I may have gone wrong? I was also previously using sass 3.6.0 but had to downgrade to 3.4 to get foundation to work. I was getting this error before from #245

versions

ruby 2.5.1
rails 5.2.0
sass-rails 5.0.7
sass 3.4.25
foundation-rails 6.4.1
auto-prefixer-rails 9.1.4

application.js

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require foundation
//= require_tree .

$(document).on('turbolinks:load', function() {
    $(document).foundation();
});

foundation_and_overrides.scss

@import 'motion-ui/motion-ui';
 @include motion-ui-transitions;
 @include motion-ui-animations;

I have uncommented these items in the file. Everything is uncommented actually.

navigation.html.erb using responsive navigation

<div class="title-bar" data-responsive-toggle="example-animated-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-animated-menu" data-animate="hinge-in-from-top spin-out">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
</div>

I am also importing this scss file in my application.scss file