Help With a Dynamic Sticky Header

Solved
Highlighted
New Member
7 0 0

This is my store: https://pennylinndesigns.com/

I love my current sticky header but find that when you scroll, it takes up too much of the screen and would like to turn the sticky header from the full logo (flower + name + date) to just the flower so it takes up less of the screen. But keep it the same when people scroll back to the top or visiting a new page. Can anyone help with that? 

0 Likes
Highlighted
Astronaut
1083 178 213

This is an accepted solution.

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:


header[data-sticky="true"]{
padding: 0 !important;
}

header[data-sticky="true"] .site-header__logo img {
max-width: 171px !important;
}


Please let me know whether it works.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
7 0 0

Thank you that worked!

0 Likes
Highlighted
Astronaut
1083 178 213

I'm glad! Wishing you a nice day.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes