Sticky header only on the product page

Store Design
, ,
1

Hi guys,

I would like to have a sticky header only on the product page so when you scroll down the product the header will appear. I use dawn theme

miyucollective.com

2

Hi @Nienke_pr

Does your theme has an announcement bar?

It will need some codebase update.

If you ask, I can help you.

3

Hi @Nienke_pr

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file base.css. Search for the following CSS snippet

.header-wrapper {
    display: block;
    position: relative;
    background-color: rgb(var(--color-background));
}

Please change to it

.header-wrapper {
    display: block;
    position: fixed !important;
    background-color: rgb(var(--color-background));
}

Result

BSSCommerceB2B_0-1722219702561.png
BSSCommerceB2B_0-1722219702561.png1294×929 281 KB

If it helps you, please like and mark it as the solution.

Best Regards

4

HI @Nienke_pr ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1722219256075.png
BSSCommerceB2B_0-1722219256075.png400×195 26.3 KB

Step 2: Search for the file theme.liquid. And add this code snippet before tag or :

{% if template contains 'product' %}
    
  {% endif %}

IN this step, I append on only product page, I change the color of icon header to black to avoid their color as same as background color body and margin-top the main body to display header properly.

Step 3: Save your code and reload this page.

=>> The result:

BSSCommerceB2B_1-1722220079349.png
BSSCommerceB2B_1-1722220079349.png1896×913 98.2 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

5

Hi @Nienke_pr

You can do that by adding this code to theme.liquid file, after in Sale channels > Online Store > Themes > Edit code

{%- if template.name == 'cart' -%}

{%- endif -%}