Awaiting an answer Templates

Shrink header and logo on scroll

Asked by komir 4 years ago Last activity 4 years ago

Hi I am using HelixUltimate core.
How can make header and logo to shrink when user start to scroll page, sometnihg like this https://www.synlawn.com/news/
Thank you

2 replies

Oldest first Newest first Most helpful
Ariba Staff
4 years ago · edited

Hello

Thank you for your query.

After enabling sticky header please add the following css rules in custom css section

#sp-header.header-sticky {
    height: 50px;
}

#sp-header.header-sticky .logo {
    height: 50px;
}

#sp-header.header-sticky #offcanvas-toggler {
    height: 50px;
}

#sp-header.header-sticky .sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
    line-height: normal;
}

Hope this helps you!

Jeffrey Kiefer
4 years ago · edited

Is there also a way to set the logo itself to get smaller on page scroll. The above works well for the header but does not change the size of the logo inside the header. I thought the snippet would do it but it had no effect on the logo size.

#sp-header.header-sticky .logo {
    height: 50px;

Even better would be a way to display a different logo on page scroll. I don't know if that is even possible.

Log in to reply.