Static Nav Bar on Jumpstart Theme

Highlighted
Shopify Partner
2 0 1

Hi all -

The Jumpstart theme has various menu states (Classic and Drawer) and the Classic version transitions to a sticky version once you start scrolling. Does anyone know how to make it always remain in the sticky state, even when the site is just opened? 

I have tried numerous tutorials for other themes that are focused on adding .header-wrapper with a position of fixed, however this has made no impact. Hoping to keep it in sticky mode so I can have a clean background for the nav and a nice break between the nav and first image. 

Thanks!

0 Likes
Tourist
8 0 1

edit theme.scss.liquid 

comment out the includes code for translate code like below:

  // Sticky variation
  &.sticky {

    position: fixed;
    top: 0;
    left: 0;
    height: 70px;
   // @include translate3d(0, -70px, 0);
    background: #fff;
    border-bottom: 1px solid $colorBorder;

    &.active {
     // @include translate3d(0, 0, 0);
    }

    &.animate {
      //transition: transform 250ms linear;
    }

  }

  // Mobile variation
  &.mobile {
    //@include translate3d(0, 0, 0);
    height: 70px;
  }

}

 

0 Likes
Tourist
8 0 1

if you do not want the navbar to stick at the top of the window then edit out "position: fixed;" as well by putting // in front as well

  // Sticky variation
  &.sticky {

    //position: fixed;
    top: 0;
    left: 0;
    height: 70px;
   // @include translate3d(0, -70px, 0);
    background: #fff;
    border-bottom: 1px solid $colorBorder;

    &.active {
     // @include translate3d(0, 0, 0);
    }

    &.animate {
      transition: transform 250ms linear;
    }

  }

  // Mobile variation
  &.mobile {
    //@include translate3d(0, 0, 0);
    height: 70px;
  }

}

 

0 Likes
Excursionist
25 1 1

Is this still relevant?  I tried it but not working? 

www.playcutter.com

0 Likes