Menu icon Foundation
How to tweak 'hamburger' in top-bar?

How can I make the .menu-icon larger in F5? I can't find anything in settings.scss (top-bar) ... elsewhere perhaps?

[edit]
Oops ... in the components/top-bar.scss of course ... :0

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

          a {
            // text-indent: -48px;
            height: 34px;
            line-height: 33px;
            padding: 0;
            padding-right: 25px;
            color: $topbar-menu-link-color;
            position: relative;

            &::after {
              content:"";
              position: absolute;
              #{$opposite-direction}: 0;
              display: block;
              width: 16px;
              top:0;
              height: 0;
              // Shh, don't tell, but box-shadows create the menu icon :)
              @if $experimental {
                -webkit-box-shadow: 0 8px 0 2px $topbar-menu-icon-color,
                                    0 16px 0 2px $topbar-menu-icon-color,
                                    0 24px 0 2px $topbar-menu-icon-color;
              }
              box-shadow:       0 8px 0 2px $topbar-menu-icon-color,
                                0 16px 0 2px $topbar-menu-icon-color,
                                0 24px 0 2px $topbar-menu-icon-color;
            
            

         

menu-iconhamburger

How can I make the .menu-icon larger in F5? I can't find anything in settings.scss (top-bar) ... elsewhere perhaps?

[edit]
Oops ... in the components/top-bar.scss of course ... :0

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

          a {
            // text-indent: -48px;
            height: 34px;
            line-height: 33px;
            padding: 0;
            padding-right: 25px;
            color: $topbar-menu-link-color;
            position: relative;

            &::after {
              content:"";
              position: absolute;
              #{$opposite-direction}: 0;
              display: block;
              width: 16px;
              top:0;
              height: 0;
              // Shh, don't tell, but box-shadows create the menu icon :)
              @if $experimental {
                -webkit-box-shadow: 0 8px 0 2px $topbar-menu-icon-color,
                                    0 16px 0 2px $topbar-menu-icon-color,
                                    0 24px 0 2px $topbar-menu-icon-color;
              }
              box-shadow:       0 8px 0 2px $topbar-menu-icon-color,
                                0 16px 0 2px $topbar-menu-icon-color,
                                0 24px 0 2px $topbar-menu-icon-color;
            
            

         
James Gehring over 5 years ago

If you change the height and width of this in your css it will change the size.

a.menu-icon span {
    box-shadow: 0 10px 0 1px #FFFFFF, 0 16px 0 1px #FFFFFF, 0 22px 0 1px #FFFFFF;
    display: block;
    height: 0;
    left: 0.72222rem;
    position: absolute;
    top: 0.27778rem;
    width: 0.88889rem;
}

Hope this helps.

Joop Vos over 5 years ago

Hello James, thanks for joining in. I've just posted an edit in my start post ... a cross post so it is. Now the question is: what's the best workflow to tweak this kind of thing? In the original .scss file or in a 'new' .css file? Or can I make a 'new' scss file (e.g. forthissiteonly.scss) with all kinds of original .scss lines which will be compiled (I'm using Mixture ... :)) into forthissiteonly.css and forthissiteonly.min.css?

BTW ... this is the code I end up with to tweak .menu-icon (and the hamburger):

.top-bar .toggle-topbar.menu-icon a {
    height: 34px;
    line-height: 33px;
    padding: 0;
    padding-right: 30px;
    color: #FFF;
    position: relative;
}    

.top-bar .toggle-topbar.menu-icon a::after {
    box-shadow: 0 6px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF, 0 22px 0 1px #FFFFFF;
    -webkit-box-shadow: 0 6px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF, 0 22px 0 1px #FFFFFF;
    display: block;
    height: 2px;
    right: 0px;
    position: absolute;
    top: 1px;
    width: 20px;
}

James Gehring over 5 years ago

It is really up to you. I will do it both ways, one project might not have as much customization so I just use the original. I was also looking at it again and the box shadow and width of

.top-bar .toggle-topbar.menu-icon a:after

is what makes the best changes to the hamburger lines.