Increasing the top and bottom height to the Jump Start Theme navigation

Highlighted
Excursionist
25 1 1

Hi,

 

How can i increase the top and bottom padding to my nav bar?

 

Playcutter.com

 

Capture.PNG

 

0 Likes
Highlighted
Shopify Partner
1279 169 401

Your store is locked, could you post the password?

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Excursionist
25 1 1

unlocked now

0 Likes
Highlighted
Shopify Partner
1279 169 401

It's a little long to explain now cause I'm at work, but if I get some time later I'll get on and let you know what to do.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Excursionist
25 1 1

Anyone?  Bueller...Bueller?

0 Likes
Highlighted
Shopify Partner
1279 169 401

There are 3 things that you need to change in your theme.scss.liquid file in your assets folder. Now it may not look exactly like this, because I can only see the compiled CSS on this side and you're going to be seeing the SCSS in your file. 

 

Look for something that looks like this, just ctrl + f for "site-header" and look for the below properties:

 

.site-header.sticky {
    position: fixed;
    left: 0;
    height: 70px;
    top: -70px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
}

That height 70px  and top -70px is what you're looking for. You want to increase those to however big you want it, say 100px. Change them both:

 

.site-header.sticky {
    position: fixed;
    left: 0;
    height: 100px;
    top: -100px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
}

Then there's also an .active class that you need to change to match that, find this, it should be pretty close to where you already made the previous change:

 

.site-header.sticky.active {
    -webkit-transform: translate3d(0, 70px, 0);
    -ms-transform: translate3d(0, 70px, 0);
    transform: translate3d(0, 70px, 0);
}

Change those to match what you changed the previous px amount to:

 

.site-header.sticky.active {
    -webkit-transform: translate3d(0, 100px, 0);
    -ms-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
}

Should be good to go.

 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Excursionist
25 1 1

Sorry, but I cannot find the sections you speak of.  I can only find these

 

Capture.JPGCapture1.JPG

0 Likes
Highlighted
Shopify Partner
1279 169 401

The first part will probably be like this, you're looking for .site-header first, you don't want .sticky before it.

 

.site-header {
  position: absolute;
  z-index: 9999;
  width: 100%;
  height: 100px;
  .wrapper {
    height: 100%;
  }
  &.animate {
    transition: transform 250ms linear;
  }
  &.sticky {
    position: fixed;
    left: 0;
    height: 70px;
    top: -70px;
    background: #fff;

Maybe try looking for the sticky class and then just look for those two 70px definitions.

 

Then there's a media query that has your transform styles. I would maybe just look for sticky or 70px to find them, cause I don't imagine there's too many things with 70px.

 

Keep in mind, there may be other styles that rely on this header being 70px, so I can't say for sure that doing this wont possibly hide something else on your site. If you're not comfortable with editing code you may want to hire a shopify expert.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
3 0 0

This has not been resolved.  Care to jump back in?  The examples you gave me are still very unclear and I cannot find any of these.  site in cuttergolf.myshopify.com playcutter.com

0 Likes
Highlighted
Shopify Partner
1279 169 401

Go into your theme.scss.liquid file in your assets folder and paste this at the bottom:

header.site-header.site-header--classic.animate.is-dark.sticky.active {
    height: 100px;
    top: -100px;
}
.site-header.sticky.active {
    -webkit-transform: translate3d(0, 100px, 0);
    -ms-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
}

That will give you 100px tall sticky header instead of 70px, change all the 100 values to whatever size you want.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes