# Top bar

A top bar, similar to an announcement bar, displays key information such as the website's contact address and other essential details. While both elements are positioned at the top of a web page.

<figure><img src="https://2989900330-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjN4IQJpCqpR7uHeXZeTb%2Fuploads%2F0NCJK0cLHSr7bAgzqVnk%2Ftopbar.png?alt=media&#x26;token=381bc1e9-148b-481d-8404-93555cd8e35d" alt=""><figcaption></figcaption></figure>

### Layout Features <a href="#layout-features" id="layout-features"></a>

**Disable Announcement bar:** This toggle option allows to enable or disable the announcement bar at the block

**Disable Announcement bar in mobile:**&#x54;his toggle option allows to enable or disable the announcement bar at the block in mobile resolutions.

**Disable Top bar:** This toggle option allows to enable or disable the Top bar at the deskstop

**Disable Announcement bar in mobile:**&#x54;his toggle option allows to enable or disable the Top bar at the mobile resolutions.

### Color scheme <a href="#color-scheme" id="color-scheme"></a>

**Color scheme:** Set ***text color*** and ***background color*** with preset scheme

### Spacing <a href="#spacing" id="spacing"></a>

**Show full width:** The Toggle button contains to enable or disable the full width of the theme.

**Enable Right & Left Spacing:** This toggle option contains to leave space on both sides of the container, it works while the show full-width option in the enabled condition

On disabling option the container width is taken to the header.

### Alignment <a href="#alignment" id="alignment"></a>

**Content Alignment:** This option allow to align the text as respective options ***(left or center)***

### Information Block <a href="#information-block" id="information-block"></a>

<figure><img src="https://2989900330-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjN4IQJpCqpR7uHeXZeTb%2Fuploads%2FDeTJH9ZnrUFkgpJM4Rgr%2Ftopbar-02.png?alt=media&#x26;token=0e31ec04-11d3-483d-b873-071a05016321" alt=""><figcaption></figcaption></figure>

**Mail:** Enter the required ***Mail id*** for the website to display in the top

**Phone no:** Enter the required ***Phone number*** for the website to display in the top

**Text:** Enter the required ***Text*** for the website to display in the top

**Link:** Enter the required ***Link*** for the website to connect it with the link and to display in the top

**Show social:** The toggle option allow to enable the social icons on the Topbar

<figure><img src="https://2989900330-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjN4IQJpCqpR7uHeXZeTb%2Fuploads%2FDOhueebuPoXSkhu6o3Nm%2Ftopbar-03.png?alt=media&#x26;token=2dbb40fd-49d4-4fef-88fd-434398699434" alt=""><figcaption></figcaption></figure>

### Adding Blocks <a href="#adding-blocks" id="adding-blocks"></a>

Click ***Add Announcement***

Add the respective Text and Link to the Announcement Block.

<figure><img src="https://2989900330-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjN4IQJpCqpR7uHeXZeTb%2Fuploads%2FfGthvo8uehyYGZqsjdN2%2Ftopbar-04.png?alt=media&#x26;token=967736c7-f826-4c5c-bec4-a6c0d8856d21" alt=""><figcaption></figcaption></figure>
