# Header

{% hint style="info" %}
**Theme settings -> Header**
{% endhint %}

{% hint style="info" %}
**Note:** The header options mentioned below are available on the desktop view.
{% endhint %}

## TOP SPACING

Set the top offset from 0 to 100px.

***

## TRANSPARENT HEADER

Avoid using the transparent header option with tile-type and vertical menu-type headers, as it may not function correctly.

Transparent header works on the home page.&#x20;

When enabled, the following options are available for this header type:

* Image: To achieve a smooth transition for your sticky header, use the same logo size as your main logo
* Svg code: Use instead of an image. SVG should have width and height attributes.
* Logo width
* Content
* Content hover

Here's an example to demonstrate the functionality of different options:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2Fb7bBreb8yDmjstHtlDze%2Fts_header.png?alt=media&#x26;token=12db9e86-ba4e-405f-88f8-41ca1ae3506c" alt=""><figcaption></figcaption></figure>

***

## **BOTTOM LINE**

Select the color for the bottom line here.

***

## **COUNTER**

* Counter
* Counter hover
* Counter text
* Counter text hover

***

## **INPUT**

* Background
* Border
* Text
* icon
* Background hover
* Border hover
* Outline hover
* Text hover
* Icon hover

***

## HEADER SHADOW

* Enable shadow: if the shadow option is enabled the below options will be seen
* Shadow
* Horizontal length
* Vertical length
* Blur radius
* Opacity
