How do I make the header stay sticky? (Ella Theme)

Store Design
, , , , , , ,
1

AndreNL_0-1718185669037.png
AndreNL_0-1718185669037.png3838×1575 456 KB

I want my header to be staying at the top whilst I’m scrolling down. I don’t know how to do that, can anyone help me?

2

Hello @AndreNL ,
please share the URL of your website.

3

https://kosterstaphorst.nl/

Current website I’m just applying small patches

4

Hi @AndreNL ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

BSSCommerceHDL_0-1718193340812.png
BSSCommerceHDL_0-1718193340812.png1902×899 133 KB

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSCommerceHDL_1-1718193347625.png
BSSCommerceHDL_1-1718193347625.png1916×934 101 KB

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

header.header.header-single-line {
    position: fixed !important;
    top: 0;
    width: 100vw !important;
}

.shopify-section.shopify-section-group-header-group.section-header-navigation {
    position: fixed !important;
    top: 83px;
}

Here is result:

BSSCommerceHDL_2-1718193363393.png
BSSCommerceHDL_2-1718193363393.png1918×883 250 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
5

Thank you!

Works perfectly!

6

Hi @AndreNL ,

We’re happy to see that our suggestion helped you solve the issue.

Should you need any further information, please do not hesitate to contact us by tagging directly at Community post. We will check and let you know soon.

Thanks in advance :heart_eyes: