Transparent header settings
The “Transparent header” on home page should be switched to use all these options.
| Setting | Description |
| Enable transparent header on home page | Toggle the switch to see the header transparent like a part of the banner, or uncheck to have the header like a separate block with its own color. |
| Background color on scroll | When the checkbox “Transparent header” is marked, you can choose the background for the header on scroll. There are five options: Main Background, Section background 1,2,3,4. Colors for these backgrounds you can set in the Theme Settings/Colors block. *The header shows on the screen as customers scroll up. |
| Text color | Two options of colors for the transparent header:
*To change the color for these styles, go to theme settings – colors block. |
| Text color on scroll | Two options of colors for the transparent header on scroll:
*To change the color for these styles, go to theme settings – colors block. *The header shows on the screen as customers scroll up. |
| Links hover color | There are four options to see links on hover in a different way :
|
| Links custom hover color | Choose “Links hover color” — custom and set custom color using this color picker. |
| Links hover color on scroll | As you scroll down the homepage, there is a header that remains fixed at the top of the page. Additionally, the header links change their color when you hover over them for a more interactive user experience. There are four options to see links on hover in different ways:
|
| Links custom hover color on scroll | Choose “Links hover color” — custom and set custom color using this color picker. |
| Counter: | When the transparent header is enabled on the homepage, you can choose the color for the counter here. The counter represents the number of products displayed near the cart icon in the header. |
| Counter background | Choose a background color from the color palette for the counter. |
| Counter background on scroll | Choose a background color from the color palette for the counter. This change will be visible when you scroll the header, and the sticky header appears. |
| Counter color | Select a color from the color palette for the counter numbers. |
| Counter color on scroll | Select a color from the color palette for the counter numbers. This change will be visible when you scroll the header, and the sticky header appears. |
| Logo image for transparent header | Upload the logo that will be displayed in the header when the page is scrolled to the top, and the header is transparent. |
| Logo image on scroll | Upload the logo that will be displayed in the header when the page is being scrolled up and the header is not transparent. *If the logo image on scroll is not uploaded, the logo image for the transparent header will be displayed instead. |