Sticky Header – Static Logo

[cunningfox]

Hey Swift Team,

First off, kudos on amazing support! You guys rock. I still have to respond to a couple of your responses to other questions – rare a support team beats me to that!

However, I am working on a site – migrating it to your framework from a hardcoded WP build we did to make easier for client.

How can I disable the sticky header bar color on scroll until it reaches a certain point.

Like I have setup here:
http://dev.hugosrestaurant.com/ (view pw: hugosla)

I’m basically looking for either some transition CSS to target that sticky header or PHP mod (like seen in other threads) to change the px height (to zero?) at which that sticky bar appears.

Here is the site I am working on w/ Cardinal:

http://hugosrestaurant.cunningfox.co/ (this has some header restructure to add second menu overlay and use overlays for mobile/tablet)

Basically, I want:

1. A static logo #1 – already there, is just ‘replaced’ too quickly by sticky header.
2. White header background to disappear immediately on scroll
3. Sticky header to reappear at certain pixel height down page and work on up-scroll. (this already exists and is working great – but need to stop reappearing at initial scroll.)

Thank you!

Jason

[cunningfox]

Another example of what I’m trying to achieve:

http://thewaterrathotel.com.au/

(my sticky header would disappear at point there’s appears – then only appear on up scroll)

[Rui Guerreiro – SUPPORT]

Hi,

Will have to forward this one to our head developer to see what can be done.
Thanks for the kind words.

-Rui

[Swift Ideas – Ed]

Hmm, it could work with some custom css – the only issue would be the changing to white, which only happens 100px or so after the header hero, you’d need to use the default sticky class to set it to be visible, fixed and transparent, then the sticky-header-hide class to make it white and not hide.

Unfortunately it would be too much work for us to provide the css for you, but a freelancer should be able to do it within an hour or so. Wish we could provide this customisation, but we simply don’t have the time to do so.

– Ed

[cunningfox]

Thanks for reply Ed.

I’m up against the wall on a deadline and naked a developer. Any recommendations on a last minute rush dev that can give me that hour?

To clarify, you’re saying:

1. Make header transparent
2. Use naked header.
3. Use sticky header.
4. Enable hide option
5. Create new CSS to target sticky header to make white?

Out of curiosity, what would be correct way to set up logo? The landing (larger) logo as default or the narrow/type/text logo as default, then using the taller landing logo as ‘alternate’?

Thanks again for your time!

[Swift Ideas – Ed]

For ASAP development we usually use codeable.io

So basically you modify the default sticky header functionality, and override the transition of colours that occurs by default, then you use the class that is added for the sticky-header-hide to override it and remove the transition, and set the colours to be as expected for the normal functionality of the sticky header.

You would probably need to override the logo as a background image with css on the sticky-header-hide class.

– Ed