Scrolling sticky transparent header (Baseline Theme) ?

Store Design
, ,
1

Hello guys,

How to make scrolling sticky transparent header on Baseline theme? Is there someone that can help?

Hereby some exemple of ’ scrolling sticky transparent header’: https://givenchy.com or this one also : https://www.loewe.com/eur/en/women/accessories/scarves-shawls/loewe-scarf-in-wool-and-mohair/F811257X03-3154.html

Thanks in advance for any help!

My website is https://amrhstudio.com

password: Phoebe2008@

2

Hi @AmeraStudios ,

This is Victor from PageFly - Advanced Page Builder App.

You can try with this code:

Please follow this:

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

Step 2: Search file theme.min.css.

Step 3: paste below code in bottom of file → save.

section.absolute.top-0.left-0.right-0.z-50 {

position: fixed !important;

top: 0 !important;

z-index: 1 !important;

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

1 Like
3

Hello @AmeraStudios

You can follow these steps:

  1. Go to Online Store->Theme->Edit code
  2. Open your theme.liquid file, paste the below code before

GemPages_0-1669257090041.png
GemPages_0-1669257090041.png1600×923 40.7 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

1 Like
4

Hi @AmeraStudios ,

Go to Actions > Edit code > Assets > theme.min.css and paste this at the bottom of the file:

.section-header {
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
}

Hope it helps!

1 Like
5

Hello @PageFly-Victor , Thanks a lot for your time and help! Yes it’s work on Desktop only is there possible to make on Mobile device also? Thanks a lot :blush:

best regards

ameerah

1 Like
6

Hello @LitCommerce Thanks for your help ! yes

have a great day

best regards

1 Like
7

Hello team @GemPages , really appreciate for help me, yes it’s works also but i have chosen Pagefly.

Thanks again,

best regards

8

Hi @AmeraStudios ,

This is Victor here. I’m glad that my answer can help. :blush:

You can try this code for sticky on mobile by following these steps:

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

Step 2: Search file theme.min.css.

Step 3: Paste the below code at bottom of the file → Save

@media screen and (max-width: 767px){

section.absolute.top-0.left-0.right-0.z-50 {

    position: fixed !important;

    top: 0 !important;

    z-index: 1 !important;

}

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

1 Like
9

Hello @PageFly-Victor ,

Amazingly works! I have no words about your kindness ! You are really the best ! Highly recommend your services!

Thanks a lot

Have a great day :hugs:

Ameerah

1 Like
10

Hi Victor. Is it possible to make the colors solid when white background vice versa?

Like they did here : www.socksss.com

Best regards,
Anton