• Resolved chefjoef

    (@chefjoef)


    Let me know if there’s already a doc on this. I can’t even figure out what to search.
    I’m building a site for https://www.secularsanctity.com. I want to hide the built-in logo in the header when the page is at the top and use the larger one I have added. Then, I want the small version to be visible when we scroll up and the sticky header shrinks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • That should be as in the documentation

    Thread Starter chefjoef

    (@chefjoef)

    @rdellconsulting

    Thanks for the reply. You’ve helped me out several times, here, and I appreciate it.

    I can’t manage to find the exact feature I want in the documentation or settings; I’m thinking I have to handle it through CSS or code, but I can’t figure out where. Please point me to the right setting if I’m just being obtuse.

    Let me explain again the goal (it may be easier if you peek at the page to see what I’m doing).
    1. I have made a large logo that I want to be at the top of the page when it is scrolled all the way to the top.
    2. When that logo is visible (i.e., scrolled to the top), I want the logo that is uploaded to the theme to be invisible.
    3. When I scroll the page and the sticky header shrinks, I want the small logo that I have uploaded to the theme to become visible only then.

    Short version: I want the logo to be visible in the theme header section ONLY when it shrinks because the page has been scrolled.

    There are 2 states for the Logo: Top/NoScroll and Scrolled.

    In Global Settings>Logo and Favicon, Uncheck the ‘Force logo dimensions to max-width:250px and max-height:100px’ box and your large Logo will appear at Top/NoScroll.

    So don’t understand your step 2.

    Step 3 will happen when you scroll.

    So only 1 setting for you to change, unless I’ve misunderstood you?

    Thread Starter chefjoef

    (@chefjoef)

    @rdellconsulting

    Thanks. The problem was that I was trying to manually put the logo on the page, so I wasn’t originally using the built-in feature at all for the full size logo. With it centered and full size, it does what I need and I can move things around a little bit using CSS to make it perfect for my desires.

    Thanks again for the help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Instructions to customize sticky header’ is closed to new replies.