New Landing How can we help? Cardinal Sticky Header – Static Logo

Viewing 6 posts - 1 through 6 (of 6 total)
  • Posted in: Cardinal
  • #193361
    cunningfox
    Member
    Post count: 5

    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

    #193374
    cunningfox
    Member
    Post count: 5

    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)

    #193757
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi,

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

    -Rui

    #193771
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    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

    #193774
    cunningfox
    Member
    Post count: 5

    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!

    #193813
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register