Sticky Header not working on PC/Desktop

Store Design
1

The sticky header is enabled in our theme settings, it is working fine for mobile.
But the PC/Desktop version is not working. (twigs.ae)

2

Hello @nd23123
This seems to be working fine in my desktop.

3

Hey @nd23123

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1724313766423.png
Moeed_0-1724313766423.png1890×865 425 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

Hi @nd23123 , I hope you are doing well,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. Paste the below code before on theme.liquid

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

5

HI @nd23123 ,

Steps to Follow:

Go to Online Store:

In your Shopify admin, navigate to Online Store in the left-hand menu.

Edit Code:

Click on the Themes section.

Under the current theme, click on Actions > Edit Code.

Find theme.liquid File:

In the left sidebar, under the Layouts folder, find and click on theme.liquid.

Add the Code Above the Tag:

Scroll down to the bottom of the theme.liquid file.

Add the following code just above the closing tag:

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

6

Hi Moeed, this worked, but on our products page there is a space above the header

nd23123_0-1724325143747.jpeg
nd23123_0-1724325143747.jpeg1600×782 107 KB

7

Hey @nd23123

Try this code instead.

{% if template == 'index' %}

{% endif %}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

8

Hello @nd23123

Please navigate to your Online Store, go to Themes, select Edit Code, and add the following code to the theme.liquid file, placing it before the tag:

.header-wrapper.sticky { width: 100%; position: fixed; top: 0; left: 0; z-index: 9999; transition: all 0.3s ease-in-out; }
1 Like
9

thanks for this, it works well now.