How to apply CSS on mobile on specific pages only

Store Design
1

Set-up

I have a Shopify webshop with a sticky header.

ONLY on mobile I DONT want a sticky header on product pages.

Current CSS

@media screen and (max-width: 768px) {    
      #shopify-section-header {
        position: inherit;
      }    
    }

This CSS makes header not sticky for mobile.

But applying liquid code such that,

{% if request.path contains '/products/' %}    
    @media screen and (max-width: 768px) {    
          #shopify-section-header {
            position: inherit;
          }    
        }    
{% endif %}

Doesn’t do anything.

Neither does,

.template-product { 
    @media screen and (max-width: 768px) {    
          #shopify-section-header {
            position: inherit;
          }    
        }    
}

as suggested here.

Question

How do I make header not sticky only on product pages?

  • product pages have ‘/products/’ in the href
2

Hello @Zaheer_Ali16 ,

This code will work in liquid file like theme.liquid

{% if template == "product" %} 
 
{% endif %}

Thanks

3

Hello @Zaheer_Ali16

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the live theme and then click Actions > Edit code.

  • Search main-product.liquid

  • Insert the provided CSS code at the top of the file and save the changes.

<style>
  @media (max-width:750px)
  {
    header
    {
      position: relative !important;
    }
  }
</style>

If you still need any changes . So please share your store URL and Password.

Please hit Like and Mark it as a Solution if you find our reply helpful.

4

Hi @Zaheer_Ali16

Add this in your theme’s theme.liquid (inside <head> or wherever your custom CSS goes):

{% if template.name == 'product' %}
  <style>
    @media screen and (max-width: 768px) {
      #shopify-section-header {
        position: inherit !important;
      }
    }
  </style>
{% endif %}