Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #814735

    Hi,

    I’d like to recreate the same effect showing on this website:
    – when scrolling down, the logo is changing to be display only symbol.
    Please, what are the steps to do it?

    #814793

    Hey sdachos,

    Thank you for using Enfold!

    You can try this:
    1. Go to Enfold > Header > Header Behavior and tick the checkbox for Shrinking Header
    2. Add this in Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    .header-scrolled .logo a img {
        visibility: hidden;
    }
    .header-scrolled .logo a {
        background: url(_SCROLLED_LOGO_URL_HERE_) no-repeat top center;
    }

    Please let us know if you need further help!

    Best regards,
    Sarah

    #815071

    Hi,

    Thank you for your reply,
    I added the code but the small logo is being cut and not displayed properly,
    Can you help please?

    #815108

    Hi there! I checked your site but it seems like there’s no change from the last time. Did you remove the changes again?

    If possible, please let us know what the URL of the small logo is so we can check. It would also be helpful for us if you can give us admin access into your site so we can take a closer look. Please put this in the Private Content section of your reply so that only staff will see it.

    Best regards,
    Sarah

    #815136

    Hi

    Since the code didn’t work properly, I removed it.
    But I put it back for you to check.

    Please let me know how should I update the code.
    Thanks again for your help

    #815154

    Hi,

    Please add this to your CSS: background-size: contain

    So the latter part of your code will be like this:

    .header-scrolled .logo a {
        background: url(_SCROLLED_LOGO_URL_HERE_) no-repeat top center;
        background-size: contain;
    }

    Best regards,
    Sarah

    #815176

    it worked! thank you so much!
    how do I add also the smooth fading transition? It feels very sudden the way the text disappears

    #815500

    Hi,
    Try this code in the General Styling > Quick CSS field:

    .header-scrolled .logo a {transition: opacity 0.9s ease 0s, height 0.9s ease 0s!important; }

    Best regards,
    Mike

    #815644

    Thank you so much
    It works more smoothly now!

    #815650

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Top Navigation / Resize Logo when scrolling’ is closed to new replies.