How to make sticky and transparent header

How to use transparent header

It’s simple, when you edit your header in Site editor, click on header template, then, select Transparent header option in Advanced options

Transparent header will set your header background as transparent and with absolute position (so, it will cover block below header)

Please, note, that if you use sticky option, then, transparent color will be disabled when header is sticked while scrolling

How to enable Sticky header

When you in Site edit mode, click on header template and click to edit it.

Now, select main parent group of header and enable sticky option in Advanced settings. You can also set different colors for background and text for sticked position of header (so, it will replace default colors of header)

As a logo, you need to use the Site logo block. In Advanced settings, you will find the option to upload a separate logo. It will replace the regular logo when the header is sticked.


2 responses to “How to make sticky and transparent header”

  1. Samiraja Kalidass Avatar

    How can we able to show the sticky header after some page scroll like 40% of viewport

    1. Igor Avatar

      this is not available. This requires to use extra plugins, for example Animation addon from Greenshift

Leave a Reply

Your email address will not be published. Required fields are marked *