Override Zurb Foundation css in Rails

Question

I can't override the class " .fixed " in foundation_and_overrides.scss because the class "fixed" doesn't exist on that file, I searched it everywhere (ctrl + f on " fixed ")

Or, I need to set its value "left" to none instead of "0". I don't know how to do it, I've already tried to override the css class directly on my header, or in application.css, but it doesn't work, I suspect the compiled foundation_and_overrides.css to takes the priority.

Also, I cannot change its value directly on the html element, because the javascript associated when scrolling destroy its css data. my html:

<div data-magellan-expedition="fixed">
  <dl class="sub-nav">
    <dd>
      <a href="/en/login">
        Log in
      </a>
    </dd>
    <dd class="active">
      <a href="/en/signin">
        Sign up
      </a>
    </dd>
  </dl>
</div>

What the inspect element of chrome tells me:

enmedia="screen"  http://0.0.0.0:3000/assets/foundation_and_overrides.css?body=1:4367
.fixed {
  width: 100%;
  left: 0;
  position: fixed;
  top: 0;
  z-index: 99;
}

I cannot create a new class, and copy the "fixed" attribrutes there, I already tried it, on such case I also need to copy x classes because the fixed attributes are parents of others attributes.

Answer 1

Class .fixed from top-bar components: https://github.com/zurb/foundation/blob/master/scss/foundation/components/_top-bar.scss

there are two ways:
1. Set variables $include-html-top-bar-classes: false if you don't need the top-bar component
2. Add some class with styles .your-class{left: none;} at the end of your styles and overwrite default .fixed