Search code examples
sassmedia-querieszurb-foundation

Changing Breakpoints in Foundation

hey Folks am having issues with changing the breakpoints for the top navigation where it toggles to a dropdown menu.

It's my first project with Foundation 4.0. I found this

* Transitions and breakpoint styles */
$topbar-transition-speed: 300ms;
$topbar-breakpoint: emCalc(940); /* Change to 9999px for always mobile layout */
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})";

But am not sure how to implement.. I have not yet uses Sacss.. eventually. .

Solution

  • You seem to be using an old version of Foundation. The modern version has !default flag in its variable declarations: https://github.com/zurb/foundation/blob/210d58068b70112e6b5cbb133e6d70cbab70efe2/scss/foundation/components/_top-bar.scss#L54

    The !default flag lets you override the variables by setting them prior to importing the library:

    $topbar-breakpoint: 400px;
@import "foundation";

    Result:

    @media only screen and (min-width: 400px) {
  .top-bar {
    /* … */
  }
  /* … */
}