/**
 Mega Hamburger
 Move Hamburger to Left on Desktop
**/
body.wm-mega-hamburger {
  .header-display-desktop .header-burger {
    order: -1;
    margin-right: 1.4vw;
    margin-left:0px;
  }
  
  /*Centered Nav & Title*/
  .header-layout-branding-center-nav-center .header-display-desktop {
    .header-title-nav-wrapper {
      flex: ~'0 0 calc(50%)';
      margin:auto;
    }
    .header-actions--left {
      flex: 0 1 ~'calc(25% - var(--hamburger-width) - 1.4vw)';
      max-width: ~'calc(25% - var(--hamburger-width) - 1.4vw)';
    }
  }

  /*Centered Nav*/
  .header-layout-nav-center .header-display-desktop {
    .header-title-nav-wrapper{
      flex: 1 0 ~'calc(67% - var(--hamburger-width) - 1.4vw)';
    }
    .header-title {
      width: ~'calc(33% - var(--hamburger-width) - 1.4vw)';
      flex: 1 1 ~'calc(33% - var(--hamburger-width) - 1.4vw)';
    }
    .header-actions {
      width: 33%;
    }
  }

  /*Centered Title*/
  .header-layout-branding-center .header-display-desktop {
    .header-title-nav-wrapper {
      flex: ~'1 0 calc(67% - var(--hamburger-width) - 1.4vw)';
    }
    .header-nav {
      width: ~'calc(33% - var(--hamburger-width) - 1.4vw)';
      flex: 1 1 ~'calc(33% - var(--hamburger-width) - 1.4vw)';
    }
    .header-actions--left {
      flex: 0 1 ~'calc(25% - var(--hamburger-width) - 1.4vw)';
      max-width: ~'calc(25% - var(--hamburger-width) - 1.4vw)';
    } 
    .header-actions {
      width: 33%
    }
  }
}
Previous
Previous

Border Styling