How to Create a Shrinking Header in Symmetry Theme?

Store Design
, , ,
1

The Symmetry theme has a sticky header setting built in, but its header takes up too much page space.

I’m trying to fix it with a Shrinking Header but don’t know what to do, hopefully someone can tell me..
Any suggestion, thanks in advance.

2

@Joeywillflysale

Please share your store URL!

Thanks!

3

To create a Shrinking Header effect for the Symmetry theme, use CSS to set the header’s position to fixed and add a transition property for smooth animation. Apply a JavaScript event listener to trigger a “shrink” class on the header when the user scrolls down, and remove it when scrolling up. Adjust the scroll distance and the transform property in CSS to control the header’s reduction. After testing on a staging site by Prestige Lavender Fields , implement the changes in the theme’s custom code area or child theme’s files. If unsure, seek help from a developer.

4

Thank you for answer!
My website link is ktchic.com and no need a password.

5

@Joeywillflysale

Please check the following URL for help

https://www.w3schools.com/howto/howto_js_shrink_header_scroll.asp

Thanks

6

Go to your Shopify admin dashboard and click on “Online Store” in the left sidebar.

Select “Themes” from the dropdown menu.

In the “Themes” section, click on “Customize” for the Symmetry theme.

In the theme customizer, locate and click on “Header.”

Look for the option called “Sticky header” or “Fixed header.” Enable this option, as it will make the header stay visible at the top of the page even when scrolling down.

Find the “Header style” or “Header layout” section. You may have different header styles available in the Symmetry theme. Choose the one that has the shrinking effect you desire.

Customize the header size, logo placement, and any other settings related to the header layout as needed in Birla Trimaya.

Save your changes by clicking on the “Save” or “Publish” button at the top-right corner of the customizer.

7

You’ll need to add some custom CSS to control the header size as you scroll. Find the CSS file (often named style.css or something similar) or use the theme’s custom CSS editor if available.visbody 3D Full human Body Scanner Machine

8

How did you set your sticky header how you have it now? Did you choose another theme? I have one now, but I don’t like the way it works exactly.