Tweaks to Sticky Header

[eldon99]

I love the sticky header, but I would like to make the following tweaks to it as it takes up way too much real estate on the page:

When you scroll down, I would like to shrink the logo and bring the "Shopping Cart" link up to the right of the phone number and my account. I would also like to hide the free shipping banner when you scroll down as well.

Any insight is greatly appreciated:

Our site: http://www.usatoolwarehouse.com/

Regards,

Eldon

[Matt Zimmermann]

Re: Tweaks to Sticky Header

Hi Eldon,

To make changes like those, you will need to edit your "structure.css" file. When you scroll, your header is given a class of "stuck". You can base your sizing and hiding on that class by pre-pending it to you call, i.e. .stuck .masthead.

[widgetsupply]

Re: Tweaks to Sticky Header

I love the sticky header, but I would like to make the following tweaks to it as it takes up way too much real estate on the page:

When you scroll down, I would like to shrink the logo and bring the "Shopping Cart" link up to the right of the phone number and my account. I would also like to hide the free shipping banner when you scroll down as well.

Any insight is greatly appreciated:

Our site: http://www.usatoolwarehouse.com/

Regards,

Eldon

I'm trying to do the same thing. I looked at your site and noticed your footer email link doesn't work. I had to get Miva Support involved to fix mine. I think it is a bug in Suivant as I have seen other sites that it didn't work either.

[Matt Zimmermann]

Re: Tweaks to Sticky Header

Hi John,

For the footer email link you are correct, it is a bug in the ReadyTheme. We have addressed it here: http://extranet.miva.com/forums/show...314#post431314

[eldon99]

Re: Tweaks to Sticky Header

@Matt,

Thank you for the info.

@John,

Thank you for pointing that out! I have pointed the email to the CTUS page. I agree that is a better solution.

Regards,

Eldon

[lesliekirk]

Re: Tweaks to Sticky Header

I'm not sure if I should tag this on here or at this thread but I've had a number of complaints about the "sticky" menu and how it "jumps". For example, you go to the page, start to scroll (albeit slowly) and the sticky header stays at the top until it reaches that mathematical point that the javascript being used triggers the "stuck". Unfortunately, it jumps back into place instead of staying firmly planted in place. Is there any way other than commenting out this code (which disables the function and the header no longer sticks)

// ---- On scroll, fix the header to the top ---- //
if ($(window).innerWidth() > 768) {
    $('#js-header').stuck();
};

)

[Matt Zimmermann]

Re: Tweaks to Sticky Header

Hi Leslie,

If you want to disable the sticky header, you can either comment out the call, as you noted, and/or remove the stuck class from the structure.css file.

[lesliekirk]

Re: Tweaks to Sticky Header

I have had to disable the call on a couple other sites, but that's not what this store owner wants. They want the stick to start at margin-top:0 instead of margin-top:193px - which is where is seems to jump back down into action from.

[Matt Zimmermann]

Re: Tweaks to Sticky Header

If they want to make the header sticky right from the start, I would recommend modifying the styles of the header and main elements to reflect the positioning and margin changes and remove the call to the function. In future version of the ReadyThemes, the sticky header will be a component you can add on instead of being baked in.

[lesliekirk]

Re: Tweaks to Sticky Header

Thanks Matt, fortunately in this case, the store owner has a javascript wizard that put a fix in place. My javascript foo is weak, but it would appear the fix he did works.

[Strat1979]

Re: Tweaks to Sticky Header

How do you get the header to behave the way is does during CHECKOUT (https)?
It simply scrolls off the page as the user scrolls down the page.
I have already commented out the header referred to above and although that works, there is that brief jump down before is scrolls away.

[Matt Zimmermann]

Re: Tweaks to Sticky Header

Hi,

If you want to remove the "sticky header" from the site, you can comment out or remove the instantiation code in your "scripts.js" file. At about line 62, you will see the section to remove.