header issues

MLG0810
Excursionist
65 1 8

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!

Replies 6 (6)
GemPages
Shopify Partner
5502 1236 1016

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
MLG0810
Excursionist
65 1 8

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
Shopify Partner
5502 1236 1016

@MLG0810 

 

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

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

 

GemPages_0-1669618959296.png

 

2. Open your theme.liquid theme file

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

 

 

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

 

 

Result:

 

Screenshot at Dec 09 18-14-22.png

 

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Rajvi__patel
Shopify Partner
49 2 13

@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;
}

BEYOND-THREADS-Ltd-–-Beyond-Threads-Ltd-.png


 

If helpful then please Like and Accept Solution.
MLG0810
Excursionist
65 1 8

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
Shopify Partner
49 2 13

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

If helpful then please Like and Accept Solution.