Menu icon Foundation
Problem with Menu Icon (5.2.2)

Hi!
I´m new with Foundation 5 using SCSS version.
i was trying to compile the top bar menu, changed some styles... (like height of the top-bar)
After that, the code of the menu didn´t work. The hamburger menu didn´t it show.

(Sorry for my english.. i´m still learning the language)

// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

@import "global";
@import "grid";
@import "buttons";

//
// Top Bar Variables
//
$include-html-top-bar-classes: $include-html-classes !default;

// Background color for the top bar
$topbar-bg-color: #d60d37 !default;
$topbar-bg: $topbar-bg-color !default;

// Height and margin
$topbar-height: 100px !default;
$topbar-margin-bottom: 0 !default;

// Controlling the styles for the title in the top bar
$topbar-title-weight: $font-weight-normal !default;
$topbar-title-font-size: rem-calc(17) !default;

// Style the top bar dropdown elements
$topbar-dropdown-bg: #333 !default;
$topbar-dropdown-link-color: #fff !default;
$topbar-dropdown-link-bg: #d60d37 !default;
$topbar-dropdown-link-weight: $font-weight-normal !default;
$topbar-dropdown-toggle-size: 5px !default;
$topbar-dropdown-toggle-color: #fff !default;
$topbar-dropdown-toggle-alpha: 0.4 !default;

// Set the link colors and styles for top-level nav
$topbar-link-color: #fff !default;
$topbar-link-color-hover: #fff !default;
$topbar-link-color-active: #fff !default;
$topbar-link-color-active-hover: #fff !default;
$topbar-link-weight: $font-weight-normal !default;
$topbar-link-font-size: rem-calc(13) !default;
$topbar-link-hover-lightness: -10% !default; // Darken by 10%
$topbar-link-bg: $topbar-bg !default;
$topbar-link-bg-hover: #272727 !default;
$topbar-link-bg-active: $primary-color !default;
$topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
$topbar-link-font-family: $body-font-family !default;
$topbar-link-text-transform: none !default;
$topbar-link-padding: $topbar-height / 3 !default;

$topbar-button-font-size: 0.75rem !default;
$topbar-button-top: 7px !default;

$topbar-dropdown-label-color: #777 !default;
$topbar-dropdown-label-text-transform: uppercase !default;
$topbar-dropdown-label-font-weight: $font-weight-bold !default;
$topbar-dropdown-label-font-size: rem-calc(10) !default;
$topbar-dropdown-label-bg: #333 !default;

// Top menu icon styles
$topbar-menu-link-transform: uppercase !default;
$topbar-menu-link-font-size: rem-calc(13) !default;
$topbar-menu-link-weight: $font-weight-bold !default;
$topbar-menu-link-color: #fff !default;
$topbar-menu-icon-color: #fff !default;
$topbar-menu-link-color-toggled: #888 !default;
$topbar-menu-icon-color-toggled: #888 !default;

// Transitions and breakpoint styles
$topbar-transition-speed: 300ms !default;
// Using rem-calc for the below breakpoint causes issues with top bar
$topbar-breakpoint: #{lower-bound($medium-range)} !default; // Change to 9999px for always mobile layout
$topbar-media-query: $medium-up !default;

// Divider Styles
$topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%) !default;
$topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%) !default;

// Sticky Class
$topbar-sticky-class: ".sticky" !default;
$topbar-arrows: true !default; //Set false to remove the triangle icon from the menu item

// Accessibility mixins for hiding and showing the menu dropdown items
@mixin topbar-hide-dropdown {
  // Makes an element visually hidden by default, but visible when focused.
  display: block;
  @include element-invisible();
}

@mixin topbar-show-dropdown {
  display: block;
  @include element-invisible-off();
  position: absolute !important; // Reset the position from static to absolute
}

@include exports("top-bar") {

  @if $include-html-top-bar-classes {

    // Used to provide media query values for javascript components.
    // This class is generated despite the value of $include-html-top-bar-classes
    // to ensure width calculations work correctly.
    meta.foundation-mq-topbar {
      font-family: "/" + unquote($topbar-media-query) + "/";
      width: $topbar-breakpoint;
    }

    /* Wrapped around .top-bar to contain to grid width */
    .contain-to-grid {
      width: 100%;
      background: $topbar-bg;

      .top-bar { margin-bottom: $topbar-margin-bottom; }
    }

    // Wrapped around .top-bar to make it stick to the top
    .fixed {
      width: 100%;
      #{$default-float}: 0;
      position: fixed;
      top: 0;
      z-index: 99;

      &.expanded:not(.top-bar) {
          overflow-y: auto;
          height: auto;
          width: 100%;
          max-height: 100%;

        .title-area {
          position: fixed;
          width: 100%;
          z-index: 99;
        }
        // Ensure you can scroll the menu on small screens
        .top-bar-section {
          z-index: 98;
          margin-top: $topbar-height;
        }
      }
    }

    .top-bar {
      overflow: hidden;
      height: $topbar-height;
      line-height: $topbar-height;
      position: relative;
      background: $topbar-bg;
      margin-bottom: $topbar-margin-bottom;

      // Topbar Global list Styles
      ul {
        margin-bottom: 0;
        list-style: none;
      }

      .row { max-width: none; }

      form,
      input { margin-bottom: 0; }

      input { height: auto; padding-top: .35rem; padding-bottom: .35rem; font-size: $topbar-button-font-size; }

      .button, button {
        padding-top: .45rem;
        padding-bottom: .35rem;
        margin-bottom: 0;
        font-size: $topbar-button-font-size;
          // position: relative;
          // top: -1px;

      }

      // Title Area
      .title-area {
        position: relative;
        margin: 0;
      }

      .name {
        height: $topbar-height;
        margin: 0;
        font-size: $rem-base;

        h1 {
          line-height: $topbar-height;
          font-size: $topbar-title-font-size;
          margin: 0;
          a {
            font-weight: $topbar-title-weight;
            color: $topbar-link-color;
            width: 75%;
            display: block;
            padding: 0 $topbar-link-padding;
          }
        }
      }

      // Menu toggle button on small devices
      .toggle-topbar {
        position: absolute;
        #{$opposite-direction}: 0;
        top: 0;

        a {
          color: $topbar-link-color;
          text-transform: $topbar-menu-link-transform;
          font-size: $topbar-menu-link-font-size;
          font-weight: $topbar-menu-link-weight;
          position: relative;
          display: block;
          padding: 0 $topbar-link-padding;
          height: $topbar-height;
          line-height: $topbar-height;
        }

        // Adding the class "menu-icon" will add the 3-line icon people love and adore.
        &.menu-icon {
          #{$opposite-direction}: $topbar-link-padding;
          top: 50%;
          margin-top: -16px;
          padding-#{$default-float}: 40px;

          a {
            @if $text-direction == rtl {
              text-indent: -58px;
            }
            height: 34px;
            line-height: 33px;
            padding: 0;
            color: $topbar-menu-link-color;
            position: relative;


            &::after {
              // @include hamburger icon
              //
              // We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon
              // $width - Width of hamburger icon
              // $left - If false, icon will be centered horizontally || explicitly set value in rem
              // $top - If false, icon will be centered vertically || explicitly set value in rem
              // $thickness - thickness of lines in hamburger icon, set value in px
              // $gap - spacing between the lines in hamburger icon, set value in px
              // $color - icon color
              // $hover-color - icon color during hover, here it is set the same as $color because the values are changed on line 264
              // $offcanvas - Set to false of @include in topbar
              @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, $topbar-menu-icon-color, false );
              #{$opposite-direction}: 0;
            }
          }
        }
      }

      // Change things up when the top-bar is expanded
      &.expanded {
        height: auto;
        background: transparent;

        .title-area { background: $topbar-bg; }

        .toggle-topbar {
          a { color: $topbar-menu-link-color-toggled;
            &::after {
              // Shh, don't tell, but box-shadows create the menu icon :)
              box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
                          0 16px 0 1px $topbar-menu-icon-color-toggled,
                          0 22px 0 1px $topbar-menu-icon-color-toggled;
    					 
            }
          }
        }
      }



    }

    // Right and Left Navigation that stacked by default
    .top-bar-section {
      #{$default-float}: 0;
      position: relative;
      width: auto;
      @include single-transition($default-float, $topbar-transition-speed);

      ul {
        padding: 0;
        width: 100%;
        height: auto;
        display: block;
        font-size: $rem-base;
        margin: 0;
      }

      .divider,
      [role="separator"] {
        border-top: $topbar-divider-border-top;
        clear: both;
        height: 1px;
        width: 100%;
      }

      ul li {
        background: $topbar-dropdown-bg;
        & > a {
          display: block;
          width: 100%;
          color: $topbar-link-color;
          padding: 12px 0 12px 0;
          padding-#{$default-float}: $topbar-link-padding;
          font-family: $topbar-link-font-family;
          font-size: $topbar-link-font-size;
          font-weight: $topbar-link-weight;
          text-transform: $topbar-link-text-transform;


          &.button {
            font-size: $topbar-link-font-size;
            padding-#{$opposite-direction}: $topbar-link-padding;
            padding-#{$default-float}: $topbar-link-padding;
            @include button-style($bg:$primary-color);
          }
          &.button.secondary { @include button-style($bg:$secondary-color); }
          &.button.success { @include button-style($bg:$success-color); }
          &.button.alert { @include button-style($bg:$alert-color); }
        }

        > button {
          font-size: $topbar-link-font-size;
          padding-#{$opposite-direction}: $topbar-link-padding;
          padding-#{$default-float}: $topbar-link-padding;
          @include button-style($bg:$primary-color);

          &.secondary { @include button-style($bg:$secondary-color); }
          &.success { @include button-style($bg:$success-color); }
          &.alert { @include button-style($bg:$alert-color); }
        }

        // Apply the hover link color when it has that class
        &:hover:not(.has-form) > a {
          background: $topbar-link-bg-hover;
          color: $topbar-link-color-hover;

        }

        // Apply the active link color when it has that class
        &.active > a {
          background: $topbar-link-bg-active;
          color: $topbar-link-color-active;
          &:hover {
                background: $topbar-link-bg-active-hover;
                color: $topbar-link-color-active-hover;
          }
        }
      }

      // Add some extra padding for list items contains buttons
      .has-form { padding: $topbar-link-padding; }

      // Styling for list items that have a dropdown within them.
      .has-dropdown {
        position: relative;

        & > a {
          &:after {
            @if ($topbar-arrows){
              @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
            }
            margin-#{$opposite-direction}: $topbar-link-padding;
            margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
            position: absolute;
            top: 50%;
            #{$opposite-direction}: 0;
          }
        }

        &.moved { position: static;
          & > .dropdown {
            @include topbar-show-dropdown();
            width: 100%;
          }
          & > a:after {
            display: none;
          }
        }
      }

      // Styling elements inside of dropdowns
      .dropdown {
        padding: 0;
        position: absolute;
        #{$default-float}: 100%;
        top: 0;
        z-index: 99;
        @include topbar-hide-dropdown();

        li {
          width: 100%;
          height: auto;

          a {
            font-weight: $topbar-dropdown-link-weight;
            padding: 8px $topbar-link-padding;
            &.parent-link {
              font-weight: $topbar-link-weight;
            }
          }

          &.title h5 {
            margin-bottom: 0;
            margin-top: 0;
            a {
              color: $topbar-link-color;
              line-height: $topbar-height / 2;
              display: block;
            }
          }
          &.has-form { padding: 8px $topbar-link-padding; }
          .button, button { top: auto; }
        }

        label {
          padding: 8px $topbar-link-padding 2px;
          margin-bottom: 0;
          text-transform: $topbar-dropdown-label-text-transform;
          color: $topbar-dropdown-label-color;
          font-weight: $topbar-dropdown-label-font-weight;
          font-size: $topbar-dropdown-label-font-size;
        }
      }
    }

    .js-generated { display: block; }


    // Top Bar styles intended for screen sizes above the breakpoint.
    @media #{$topbar-media-query} {
      .top-bar {
        background: $topbar-bg;
        @include clearfix;
        overflow: visible;

        .toggle-topbar { display: none; }

        .title-area { float: $default-float; }
        .name h1 a { width: auto; }

        input,
        .button,
        button {
          font-size: rem-calc(14);
          position: relative;
          top: $topbar-button-top;
        }

        &.expanded { background: $topbar-bg; }
      }

      .contain-to-grid .top-bar {
        max-width: $row-width;
        margin: 0 auto;
        margin-bottom: $topbar-margin-bottom;
      }

      .top-bar-section {
        @include single-transition(none,0,0);
        #{$default-float}: 0 !important;

        ul {
          width: auto;
          height: auto !important;
          display: inline;

          li {
            float: $default-float;
            .js-generated { display: none; }
          }
        }

        li {
          &.hover {
            > a:not(.button) {
              background: $topbar-link-bg-hover;
              color: $topbar-link-color-hover;
            }
          }
          &:not(.has-form) {
            a:not(.button) {
              padding: 0 $topbar-link-padding;
              line-height: $topbar-height;
              background: $topbar-link-bg;
              &:hover { background: $topbar-link-bg-hover; }
            }
          }
          &.active:not(.has-form) {
            a:not(.button) {
              padding: 0 $topbar-link-padding;
              line-height: $topbar-height;
              color: $topbar-link-color-active;
              background: $topbar-link-bg-active;
              &:hover { background: $topbar-link-bg-active-hover; }
            }
          }
        }

        .has-dropdown {

          @if($topbar-arrows){

            & > a {
              padding-#{$opposite-direction}: $topbar-link-padding + 20 !important;
              &:after {
                @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
                margin-top: -($topbar-dropdown-toggle-size / 2);
                top: $topbar-height / 2;
              }
            }

          }

          &.moved { position: relative;
            & > .dropdown {
              @include topbar-hide-dropdown();
            }
          }

          &.hover, &.not-click:hover {
            & > .dropdown {
              @include topbar-show-dropdown();
            }
          }

          .dropdown li.has-dropdown {
            & > a {
              &:after {
                border: none;
                content: "\00bb";
                top: 1rem;
                margin-top: -1px;
                #{$opposite-direction}: 5px;
                line-height: 1.2;
              }
            }
          }

        }

        .dropdown {
          #{$default-float}: 0;
          top: auto;
          background: transparent;
          min-width: 100%;

          li {
            a {
              color: $topbar-dropdown-link-color;
              line-height: 45px;
              white-space: nowrap;
              padding: 12px $topbar-link-padding;
              background: $topbar-dropdown-link-bg;
            }

            &:not(.has-form) a:not(.button) {
              color: $topbar-dropdown-link-color;
              background: $topbar-dropdown-link-bg;
              line-height: 45px;
            }
            &:not(.has-form):hover > a:not(.button) {
              color: $topbar-link-color-hover;
              background: $topbar-link-bg-hover;
            }

            label {
              white-space: nowrap;
              background: $topbar-dropdown-label-bg;
            }

            // Second Level Dropdowns
            .dropdown {
              #{$default-float}: 100%;
              top: 0;
            }
          }
        }

        & > ul > .divider,
        & > ul > [role="separator"] {
          border-bottom: none;
          border-top: none;
          border-#{$opposite-direction}: $topbar-divider-border-bottom;
          clear: none;
          height: $topbar-height;
          width: 0;
        }

        .has-form {
          background: $topbar-link-bg;
          padding: 0 $topbar-height / 3;
          height: $topbar-height;
        }

        // Position overrides for ul.right and ul.left
        .right {
          li .dropdown {
            #{$default-float}: auto;
            #{$opposite-direction}: 0;

            li .dropdown { #{$opposite-direction}: 100%; }
          }
        }
        .left {
          li .dropdown {
            #{$opposite-direction}: auto;
            #{$default-float}: 0;

            li .dropdown { #{$default-float}: 100%; }
          }
        }
      }

      // Degrade gracefully when Javascript is disabled. Displays dropdown and changes
      // background & text color on hover.
      .no-js .top-bar-section {
        ul li {
          // Apply the hover link color when it has that class
          &:hover > a {
            background: $topbar-link-bg-hover;
            color: $topbar-link-color-hover;
          }

          // Apply the active link color when it has that class
          &:active > a {
            background: $topbar-link-bg-active;
            color: $topbar-link-color-active;
          }
        }

        .has-dropdown {
          &:hover {
            & > .dropdown {
              @include topbar-show-dropdown();
            }
          }
        }
      }
    }
  }
}

            

         

Muestra

In my css after process, Preposs changed the scss, adding some tags:
For example...

a::after span:after {...}

Where is the problem?! why the final version compile has this differences?

.top-bar .toggle-topbar.menu-icon {
  right: 33.33333px;
  top: 50%;
  margin-top: -16px;
  padding-left: 40px;
}
.top-bar .toggle-topbar.menu-icon a {
  height: 34px;
  line-height: 33px;
  padding: 0;
  color: white;
  position: relative;
}
.top-bar .toggle-topbar.menu-icon a::after {
  right: 0;
}
.top-bar .toggle-topbar.menu-icon a::after span:after {
  content: '';
  position: absolute;
  display: block;
  height: 0;
  box-shadow: 0 0px 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
  width: 16px;
}
.top-bar .toggle-topbar.menu-icon a::after span:hover:after {
  box-shadow: 0 0px 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
}
            

         

menu iconhamburgerpreposs

Hi!
I´m new with Foundation 5 using SCSS version.
i was trying to compile the top bar menu, changed some styles... (like height of the top-bar)
After that, the code of the menu didn´t work. The hamburger menu didn´t it show.

(Sorry for my english.. i´m still learning the language)

// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

@import "global";
@import "grid";
@import "buttons";

//
// Top Bar Variables
//
$include-html-top-bar-classes: $include-html-classes !default;

// Background color for the top bar
$topbar-bg-color: #d60d37 !default;
$topbar-bg: $topbar-bg-color !default;

// Height and margin
$topbar-height: 100px !default;
$topbar-margin-bottom: 0 !default;

// Controlling the styles for the title in the top bar
$topbar-title-weight: $font-weight-normal !default;
$topbar-title-font-size: rem-calc(17) !default;

// Style the top bar dropdown elements
$topbar-dropdown-bg: #333 !default;
$topbar-dropdown-link-color: #fff !default;
$topbar-dropdown-link-bg: #d60d37 !default;
$topbar-dropdown-link-weight: $font-weight-normal !default;
$topbar-dropdown-toggle-size: 5px !default;
$topbar-dropdown-toggle-color: #fff !default;
$topbar-dropdown-toggle-alpha: 0.4 !default;

// Set the link colors and styles for top-level nav
$topbar-link-color: #fff !default;
$topbar-link-color-hover: #fff !default;
$topbar-link-color-active: #fff !default;
$topbar-link-color-active-hover: #fff !default;
$topbar-link-weight: $font-weight-normal !default;
$topbar-link-font-size: rem-calc(13) !default;
$topbar-link-hover-lightness: -10% !default; // Darken by 10%
$topbar-link-bg: $topbar-bg !default;
$topbar-link-bg-hover: #272727 !default;
$topbar-link-bg-active: $primary-color !default;
$topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
$topbar-link-font-family: $body-font-family !default;
$topbar-link-text-transform: none !default;
$topbar-link-padding: $topbar-height / 3 !default;

$topbar-button-font-size: 0.75rem !default;
$topbar-button-top: 7px !default;

$topbar-dropdown-label-color: #777 !default;
$topbar-dropdown-label-text-transform: uppercase !default;
$topbar-dropdown-label-font-weight: $font-weight-bold !default;
$topbar-dropdown-label-font-size: rem-calc(10) !default;
$topbar-dropdown-label-bg: #333 !default;

// Top menu icon styles
$topbar-menu-link-transform: uppercase !default;
$topbar-menu-link-font-size: rem-calc(13) !default;
$topbar-menu-link-weight: $font-weight-bold !default;
$topbar-menu-link-color: #fff !default;
$topbar-menu-icon-color: #fff !default;
$topbar-menu-link-color-toggled: #888 !default;
$topbar-menu-icon-color-toggled: #888 !default;

// Transitions and breakpoint styles
$topbar-transition-speed: 300ms !default;
// Using rem-calc for the below breakpoint causes issues with top bar
$topbar-breakpoint: #{lower-bound($medium-range)} !default; // Change to 9999px for always mobile layout
$topbar-media-query: $medium-up !default;

// Divider Styles
$topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%) !default;
$topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%) !default;

// Sticky Class
$topbar-sticky-class: ".sticky" !default;
$topbar-arrows: true !default; //Set false to remove the triangle icon from the menu item

// Accessibility mixins for hiding and showing the menu dropdown items
@mixin topbar-hide-dropdown {
  // Makes an element visually hidden by default, but visible when focused.
  display: block;
  @include element-invisible();
}

@mixin topbar-show-dropdown {
  display: block;
  @include element-invisible-off();
  position: absolute !important; // Reset the position from static to absolute
}

@include exports("top-bar") {

  @if $include-html-top-bar-classes {

    // Used to provide media query values for javascript components.
    // This class is generated despite the value of $include-html-top-bar-classes
    // to ensure width calculations work correctly.
    meta.foundation-mq-topbar {
      font-family: "/" + unquote($topbar-media-query) + "/";
      width: $topbar-breakpoint;
    }

    /* Wrapped around .top-bar to contain to grid width */
    .contain-to-grid {
      width: 100%;
      background: $topbar-bg;

      .top-bar { margin-bottom: $topbar-margin-bottom; }
    }

    // Wrapped around .top-bar to make it stick to the top
    .fixed {
      width: 100%;
      #{$default-float}: 0;
      position: fixed;
      top: 0;
      z-index: 99;

      &.expanded:not(.top-bar) {
          overflow-y: auto;
          height: auto;
          width: 100%;
          max-height: 100%;

        .title-area {
          position: fixed;
          width: 100%;
          z-index: 99;
        }
        // Ensure you can scroll the menu on small screens
        .top-bar-section {
          z-index: 98;
          margin-top: $topbar-height;
        }
      }
    }

    .top-bar {
      overflow: hidden;
      height: $topbar-height;
      line-height: $topbar-height;
      position: relative;
      background: $topbar-bg;
      margin-bottom: $topbar-margin-bottom;

      // Topbar Global list Styles
      ul {
        margin-bottom: 0;
        list-style: none;
      }

      .row { max-width: none; }

      form,
      input { margin-bottom: 0; }

      input { height: auto; padding-top: .35rem; padding-bottom: .35rem; font-size: $topbar-button-font-size; }

      .button, button {
        padding-top: .45rem;
        padding-bottom: .35rem;
        margin-bottom: 0;
        font-size: $topbar-button-font-size;
          // position: relative;
          // top: -1px;

      }

      // Title Area
      .title-area {
        position: relative;
        margin: 0;
      }

      .name {
        height: $topbar-height;
        margin: 0;
        font-size: $rem-base;

        h1 {
          line-height: $topbar-height;
          font-size: $topbar-title-font-size;
          margin: 0;
          a {
            font-weight: $topbar-title-weight;
            color: $topbar-link-color;
            width: 75%;
            display: block;
            padding: 0 $topbar-link-padding;
          }
        }
      }

      // Menu toggle button on small devices
      .toggle-topbar {
        position: absolute;
        #{$opposite-direction}: 0;
        top: 0;

        a {
          color: $topbar-link-color;
          text-transform: $topbar-menu-link-transform;
          font-size: $topbar-menu-link-font-size;
          font-weight: $topbar-menu-link-weight;
          position: relative;
          display: block;
          padding: 0 $topbar-link-padding;
          height: $topbar-height;
          line-height: $topbar-height;
        }

        // Adding the class "menu-icon" will add the 3-line icon people love and adore.
        &.menu-icon {
          #{$opposite-direction}: $topbar-link-padding;
          top: 50%;
          margin-top: -16px;
          padding-#{$default-float}: 40px;

          a {
            @if $text-direction == rtl {
              text-indent: -58px;
            }
            height: 34px;
            line-height: 33px;
            padding: 0;
            color: $topbar-menu-link-color;
            position: relative;


            &::after {
              // @include hamburger icon
              //
              // We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon
              // $width - Width of hamburger icon
              // $left - If false, icon will be centered horizontally || explicitly set value in rem
              // $top - If false, icon will be centered vertically || explicitly set value in rem
              // $thickness - thickness of lines in hamburger icon, set value in px
              // $gap - spacing between the lines in hamburger icon, set value in px
              // $color - icon color
              // $hover-color - icon color during hover, here it is set the same as $color because the values are changed on line 264
              // $offcanvas - Set to false of @include in topbar
              @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, $topbar-menu-icon-color, false );
              #{$opposite-direction}: 0;
            }
          }
        }
      }

      // Change things up when the top-bar is expanded
      &.expanded {
        height: auto;
        background: transparent;

        .title-area { background: $topbar-bg; }

        .toggle-topbar {
          a { color: $topbar-menu-link-color-toggled;
            &::after {
              // Shh, don't tell, but box-shadows create the menu icon :)
              box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
                          0 16px 0 1px $topbar-menu-icon-color-toggled,
                          0 22px 0 1px $topbar-menu-icon-color-toggled;
    					 
            }
          }
        }
      }



    }

    // Right and Left Navigation that stacked by default
    .top-bar-section {
      #{$default-float}: 0;
      position: relative;
      width: auto;
      @include single-transition($default-float, $topbar-transition-speed);

      ul {
        padding: 0;
        width: 100%;
        height: auto;
        display: block;
        font-size: $rem-base;
        margin: 0;
      }

      .divider,
      [role="separator"] {
        border-top: $topbar-divider-border-top;
        clear: both;
        height: 1px;
        width: 100%;
      }

      ul li {
        background: $topbar-dropdown-bg;
        & > a {
          display: block;
          width: 100%;
          color: $topbar-link-color;
          padding: 12px 0 12px 0;
          padding-#{$default-float}: $topbar-link-padding;
          font-family: $topbar-link-font-family;
          font-size: $topbar-link-font-size;
          font-weight: $topbar-link-weight;
          text-transform: $topbar-link-text-transform;


          &.button {
            font-size: $topbar-link-font-size;
            padding-#{$opposite-direction}: $topbar-link-padding;
            padding-#{$default-float}: $topbar-link-padding;
            @include button-style($bg:$primary-color);
          }
          &.button.secondary { @include button-style($bg:$secondary-color); }
          &.button.success { @include button-style($bg:$success-color); }
          &.button.alert { @include button-style($bg:$alert-color); }
        }

        > button {
          font-size: $topbar-link-font-size;
          padding-#{$opposite-direction}: $topbar-link-padding;
          padding-#{$default-float}: $topbar-link-padding;
          @include button-style($bg:$primary-color);

          &.secondary { @include button-style($bg:$secondary-color); }
          &.success { @include button-style($bg:$success-color); }
          &.alert { @include button-style($bg:$alert-color); }
        }

        // Apply the hover link color when it has that class
        &:hover:not(.has-form) > a {
          background: $topbar-link-bg-hover;
          color: $topbar-link-color-hover;

        }

        // Apply the active link color when it has that class
        &.active > a {
          background: $topbar-link-bg-active;
          color: $topbar-link-color-active;
          &:hover {
                background: $topbar-link-bg-active-hover;
                color: $topbar-link-color-active-hover;
          }
        }
      }

      // Add some extra padding for list items contains buttons
      .has-form { padding: $topbar-link-padding; }

      // Styling for list items that have a dropdown within them.
      .has-dropdown {
        position: relative;

        & > a {
          &:after {
            @if ($topbar-arrows){
              @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
            }
            margin-#{$opposite-direction}: $topbar-link-padding;
            margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
            position: absolute;
            top: 50%;
            #{$opposite-direction}: 0;
          }
        }

        &.moved { position: static;
          & > .dropdown {
            @include topbar-show-dropdown();
            width: 100%;
          }
          & > a:after {
            display: none;
          }
        }
      }

      // Styling elements inside of dropdowns
      .dropdown {
        padding: 0;
        position: absolute;
        #{$default-float}: 100%;
        top: 0;
        z-index: 99;
        @include topbar-hide-dropdown();

        li {
          width: 100%;
          height: auto;

          a {
            font-weight: $topbar-dropdown-link-weight;
            padding: 8px $topbar-link-padding;
            &.parent-link {
              font-weight: $topbar-link-weight;
            }
          }

          &.title h5 {
            margin-bottom: 0;
            margin-top: 0;
            a {
              color: $topbar-link-color;
              line-height: $topbar-height / 2;
              display: block;
            }
          }
          &.has-form { padding: 8px $topbar-link-padding; }
          .button, button { top: auto; }
        }

        label {
          padding: 8px $topbar-link-padding 2px;
          margin-bottom: 0;
          text-transform: $topbar-dropdown-label-text-transform;
          color: $topbar-dropdown-label-color;
          font-weight: $topbar-dropdown-label-font-weight;
          font-size: $topbar-dropdown-label-font-size;
        }
      }
    }

    .js-generated { display: block; }


    // Top Bar styles intended for screen sizes above the breakpoint.
    @media #{$topbar-media-query} {
      .top-bar {
        background: $topbar-bg;
        @include clearfix;
        overflow: visible;

        .toggle-topbar { display: none; }

        .title-area { float: $default-float; }
        .name h1 a { width: auto; }

        input,
        .button,
        button {
          font-size: rem-calc(14);
          position: relative;
          top: $topbar-button-top;
        }

        &.expanded { background: $topbar-bg; }
      }

      .contain-to-grid .top-bar {
        max-width: $row-width;
        margin: 0 auto;
        margin-bottom: $topbar-margin-bottom;
      }

      .top-bar-section {
        @include single-transition(none,0,0);
        #{$default-float}: 0 !important;

        ul {
          width: auto;
          height: auto !important;
          display: inline;

          li {
            float: $default-float;
            .js-generated { display: none; }
          }
        }

        li {
          &.hover {
            > a:not(.button) {
              background: $topbar-link-bg-hover;
              color: $topbar-link-color-hover;
            }
          }
          &:not(.has-form) {
            a:not(.button) {
              padding: 0 $topbar-link-padding;
              line-height: $topbar-height;
              background: $topbar-link-bg;
              &:hover { background: $topbar-link-bg-hover; }
            }
          }
          &.active:not(.has-form) {
            a:not(.button) {
              padding: 0 $topbar-link-padding;
              line-height: $topbar-height;
              color: $topbar-link-color-active;
              background: $topbar-link-bg-active;
              &:hover { background: $topbar-link-bg-active-hover; }
            }
          }
        }

        .has-dropdown {

          @if($topbar-arrows){

            & > a {
              padding-#{$opposite-direction}: $topbar-link-padding + 20 !important;
              &:after {
                @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
                margin-top: -($topbar-dropdown-toggle-size / 2);
                top: $topbar-height / 2;
              }
            }

          }

          &.moved { position: relative;
            & > .dropdown {
              @include topbar-hide-dropdown();
            }
          }

          &.hover, &.not-click:hover {
            & > .dropdown {
              @include topbar-show-dropdown();
            }
          }

          .dropdown li.has-dropdown {
            & > a {
              &:after {
                border: none;
                content: "\00bb";
                top: 1rem;
                margin-top: -1px;
                #{$opposite-direction}: 5px;
                line-height: 1.2;
              }
            }
          }

        }

        .dropdown {
          #{$default-float}: 0;
          top: auto;
          background: transparent;
          min-width: 100%;

          li {
            a {
              color: $topbar-dropdown-link-color;
              line-height: 45px;
              white-space: nowrap;
              padding: 12px $topbar-link-padding;
              background: $topbar-dropdown-link-bg;
            }

            &:not(.has-form) a:not(.button) {
              color: $topbar-dropdown-link-color;
              background: $topbar-dropdown-link-bg;
              line-height: 45px;
            }
            &:not(.has-form):hover > a:not(.button) {
              color: $topbar-link-color-hover;
              background: $topbar-link-bg-hover;
            }

            label {
              white-space: nowrap;
              background: $topbar-dropdown-label-bg;
            }

            // Second Level Dropdowns
            .dropdown {
              #{$default-float}: 100%;
              top: 0;
            }
          }
        }

        & > ul > .divider,
        & > ul > [role="separator"] {
          border-bottom: none;
          border-top: none;
          border-#{$opposite-direction}: $topbar-divider-border-bottom;
          clear: none;
          height: $topbar-height;
          width: 0;
        }

        .has-form {
          background: $topbar-link-bg;
          padding: 0 $topbar-height / 3;
          height: $topbar-height;
        }

        // Position overrides for ul.right and ul.left
        .right {
          li .dropdown {
            #{$default-float}: auto;
            #{$opposite-direction}: 0;

            li .dropdown { #{$opposite-direction}: 100%; }
          }
        }
        .left {
          li .dropdown {
            #{$opposite-direction}: auto;
            #{$default-float}: 0;

            li .dropdown { #{$default-float}: 100%; }
          }
        }
      }

      // Degrade gracefully when Javascript is disabled. Displays dropdown and changes
      // background & text color on hover.
      .no-js .top-bar-section {
        ul li {
          // Apply the hover link color when it has that class
          &:hover > a {
            background: $topbar-link-bg-hover;
            color: $topbar-link-color-hover;
          }

          // Apply the active link color when it has that class
          &:active > a {
            background: $topbar-link-bg-active;
            color: $topbar-link-color-active;
          }
        }

        .has-dropdown {
          &:hover {
            & > .dropdown {
              @include topbar-show-dropdown();
            }
          }
        }
      }
    }
  }
}

            

         

Muestra

In my css after process, Preposs changed the scss, adding some tags:
For example...

a::after span:after {...}

Where is the problem?! why the final version compile has this differences?

.top-bar .toggle-topbar.menu-icon {
  right: 33.33333px;
  top: 50%;
  margin-top: -16px;
  padding-left: 40px;
}
.top-bar .toggle-topbar.menu-icon a {
  height: 34px;
  line-height: 33px;
  padding: 0;
  color: white;
  position: relative;
}
.top-bar .toggle-topbar.menu-icon a::after {
  right: 0;
}
.top-bar .toggle-topbar.menu-icon a::after span:after {
  content: '';
  position: absolute;
  display: block;
  height: 0;
  box-shadow: 0 0px 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
  width: 16px;
}
.top-bar .toggle-topbar.menu-icon a::after span:hover:after {
  box-shadow: 0 0px 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
}
            

         
Wing-Hou Chan over 5 years ago

Howdy!

Thank you for reporting this bug!

I have created a GitHub issue here: https://github.com/zurb/foundation/issues/5199

This will allow better tracking of the issue.

If you have anything else to add, write a comment on the issue through the link above!

Cris Woler over 5 years ago

Thanks Wing-Hou Chan!
If i found the solution i´ll post in GitHub

Wing-Hou Chan over 5 years ago

Luckily I found the solution and a Pull Request is on its way to fixing the problem.

Here is the PR for you to view: https://github.com/zurb/foundation/pull/5201

Cris Woler over 5 years ago

Thanks Wing-Hou Chan!
I did all you said, but I still see an error in the position of the menu,

Wing-Hou Chan over 5 years ago

The Pull Request has not been merged with the master branch yet.

Once it has been merged you should see the changes.

Alternatively you can remove Line 234 and 238 of _top-bar.scss, which were the changes I made.

If you still experience problems after the changes, could you please post the output CSS?

Cris Woler over 5 years ago

I found the solution. The problem was in the line 124 on _global.scss
I put some more lines :

@mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) {
  span:after {
    content: '';
    position: absolute;
    display: block;
    height: 0;
// this lines:
  top:8px;
  right:0px;

Wing-Hou Chan over 5 years ago

That shouldn't have fixed it.

The problem is the output CSS selector is incorrect.

By adding the top and right, it will overwrite the user defined values in in _offcanvas.scss.

I'm looking into it right now, hold tight.

Rescue Themes about 5 years ago

I'm woefully behind on SCSS so I'm not sure how to resolve this with my vanilla CSS download of Foundation. Can anyone point me in the right direction on how to apply this patch to my non-Sass implementation?

Rescue Themes about 5 years ago

To answer my own question:

.top-bar .toggle-topbar.menu-icon a:after {
    box-shadow: 0 10px 0 1px #FFFFFF, 0 16px 0 1px #FFFFFF, 0 22px 0 1px #FFFFFF;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
}
.top-bar .toggle-topbar.menu-icon a {
    color: #FFFFFF;
    height: 34px;
    line-height: 33px;
    padding: 0 25px 0 0;
    position: relative;
}

Marcus about 5 years ago

Thanks Rescue Themes. That was an easy fix.

Wing-Hou Chan about 5 years ago

Howdy everyone!

The problem has now been fixed. Many thanks to @doGus (Foundation Forum alias) / @dGs- (GitHub alias).

Here is the PR for you to view: https://github.com/zurb/foundation/pull/5268