Can I replicate the Empire theme's header scroll effect on my Athens theme?

Store Design
,
1

Hello,

I’m wondering if it’s possible to make the header effect for my shop (athens theme) similar to that of the empire theme. https://themes.shopify.com/themes/empire/styles/industrial/preview?surface_detail=empire&surface_inter_position=1&surface_intra_position=1&surface_type=search

Not sure if it’s possible but it would be really cool if I could (mainly when im scrolling up). Not sure if this is to difficult to achieve. My website link is artgex.myshopify.com - pass: Superpowers123

2

Go to Online store > Themes > Edit code > base.css, add those code at the bottom of file, click Save button

#shopify-section-header { position: sticky !important; top: 0px !important; }
.shopify-section-header-hidden { transform: translateY(0%)!important; }
3

Hello @David123123 ,

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

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1670220205164.png
GemPages_0-1670220205164.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

For example,

GemPages_1-1670220326445.png
GemPages_1-1670220326445.png1917×899 69.3 KB

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

4

Hello! thanks for the response!

Is there a way to make the menu into the icon as it scrolls down just like the theme (so it doesn’t take up too much space) - I kind of want that effect but not sure if that’s a bit to complicated. Thanks!

5

Hi @David123123 ,

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Add this CSS at the bottom

Online Store ->Theme ->Edit code

Assets → base.css

.color-accent-1 {

    margin-top: 151px !important;

}

#header {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    z-index: 1 !important;

}

Hope you find my answer helpful!

Best regards,

Victor | PageFly