header issues

[MLG0810]

on static, my header and announcements look perfect on both desktop and mobile. however, when i scroll (i have set header/announcements to be sticky), the logo is cut - which i presume is because of padding issues because of the announcements being sticky. i need this adjusted only when scrolling but do not want to add additional padding on both mobile/desktop when doing so. does that make sense? immediate response and assistance appreciated. thank you!

[GemPages]

Hello @MLG0810 

It's GemPages support team and glad to support you today.

To provide you with the most precise solution in this case/ To make sure we catch your meaning right, could you please share... link? Thank you and hope to hear from you

[MLG0810]

LINK HERE

everything looks fine now on both desktop and mobile. but once you scroll, the logo is cut. i know it is a padding issue. but i do not want to add additional padding that will affect the current state - i just want to adjust it when scrolling on both desktop and mobile. thank you and on standby for code corrections or adjustments that you can suggest.

[GemPages]

@MLG0810 

I would like to give you a solution to support you:

1. Go to Online Store -> Theme -> Edit code:

2. Open your theme.liquid theme file

3. Paste the below code before </body>:

<style>
body .shopify-section-header-sticky {
    top: 88px;
}
</style>

Result:

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[Rajvi__patel]

@MLG0810 
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css.
Step 3: Paste the below code at bottom of the file -> Save

div#shopify-section-header {
    top: 85px!important;
}

 

[MLG0810]

that is perfect thank you so much! one more thing - is it possible to have the sticky to be static going up and down? it only works when scrolling up but not down currently. any code to fix this issue? thank you!

[Rajvi__patel]

Sorry but I'm little bit confuse about what you want ?
You want to sticky your header like announcement bar?