# Header Settings

## I: Choose a Header for All Pages. <a href="#i-choose-a-header-for-all-pages" id="i-choose-a-header-for-all-pages"></a>

Suppose that, you like to choose "Header 1" for all your pages

### Step 1: Choose Header in Global <a href="#step-1-choose-header-in-global" id="step-1-choose-header-in-global"></a>

Go to Appearance >> Customize >> Header, select: "Header 1"

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2FREDQeHaX7ZFtIeOwpEIs%2Fimage.png?alt=media&#x26;token=71c5097f-c558-4543-934f-ef8f345e1ce2" alt=""><figcaption></figcaption></figure>

### Step 2: Choose "Global" Option in Header Version Drop-Down of All Pages <a href="#step-3-choose-global-option-in-header-version-drop-down-of-all-pages" id="step-3-choose-global-option-in-header-version-drop-down-of-all-pages"></a>

Go to: Pages >> All Pages >> Edit Every Page >> General Setting >> Header Version Drop-down: choose "Global" option

**Please, note**: To display General Setting Area, you have to install and active CMB2 plugin.

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2FIoo9Q30nKvKk6simHKBG%2Fheader-settings-kababi.png?alt=media&#x26;token=abc51eee-0f1b-41fd-be89-7c53fe668904" alt=""><figcaption></figcaption></figure>

## II: Choose a Header for a Page <a href="#ii-choose-a-header-for-a-page" id="ii-choose-a-header-for-a-page"></a>

Go to Pages >> All Pages: choose a page that want to change its header, go to: General Setting area >> Header Version drop-down:

**Please, note**: To display General Setting Area, you have to install and active CMB2 plugin.

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2FVbIIV3L28WcCxNOgQu06%2Fheader-settings-kababi-1.png?alt=media&#x26;token=36f9b004-9a2f-4772-aa62-601a068d71e9" alt=""><figcaption></figcaption></figure>

Options in Header Version drop-down:

* **Global**: Use the header that is set in Appearance >> Customize >> Header

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2FcB0tRThFHybYrISBvIzq%2Fimage.png?alt=media&#x26;token=f750cbbe-6070-45c5-a443-b97ec6269dd7" alt=""><figcaption></figcaption></figure>

* **Default**: Use Default Header. You only can customize this header in template file ( header.php file in theme)
* **Header Simple, Header Banner, Header 1, Header 2, Header 3**  : You can choose one of these headers for the page. If you choose these headers, you can change it in Builder Header Footer >> All HF

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2FilWuQLaFveiparj37ygR%2Fheader-settings-kababi-2.png?alt=media&#x26;token=1a1ad3b6-cb14-45a9-a7f2-1698a6a91523" alt=""><figcaption></figcaption></figure>

## III: Change Data for Header <a href="#iii-change-data-for-header" id="iii-change-data-for-header"></a>

Our theme supports 2 header types:

* Default header
* Headers built in Elementor

### 1: Change Data for Default Header <a href="#id-1-change-data-for-default-header" id="id-1-change-data-for-default-header"></a>

* **Change Logo for Default Header**: Appearance >> Customize >> Site Identity >> Logo Default tab: change logo.

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2FYa6mN39Gg8ZyZZ7YKwAQ%2Fheader-settings-kababi-3.png?alt=media&#x26;token=c734db5d-0882-4f2a-9ed0-e3b23a18bf52" alt=""><figcaption></figcaption></figure>

* **Change Menu for Default Header**: Appearance >> Customize >> Menu

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2F5fsr8CcL9Od2ZMISmxGZ%2Fimage.png?alt=media&#x26;token=277a6b66-84d6-42b4-8aec-3cdf956adec3" alt=""><figcaption></figcaption></figure>

* **Modify other data for default header**: You need to change the data in the theme file (`template-parts/header-default.php`) if the header is the default header.

### 2: Modify Data for Headers Built in Elementor <a href="#id-2-chang-data-for-headers-built-in-elementor" id="id-2-chang-data-for-headers-built-in-elementor"></a>

You have to use Elementor to modify data for these headers

#### **Step 1: To edit these headers, you can follow 2 ways:**

* **The first way**: Login site with Administrator account, go to frontend, move on Edit with Elementor in the Site Bar, select: header Banner.

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2F8xIDWD8LUdcrb8NUP50k%2Fheader-settings-kababi-4.png?alt=media&#x26;token=ed8b1edc-d464-4d45-b7e4-ae2b17acce13" alt=""><figcaption></figcaption></figure>

* **The second way**: Go to Builder Header Footer >> All HF >> Choose the header you want to change the data of it, then click: edit with Elementor

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2FNkZ4TEhYrHEWiQLyDlPv%2Fimage.png?alt=media&#x26;token=b5e18d3a-9801-48e5-8c3f-85093d18f1dd" alt=""><figcaption></figcaption></figure>

#### **Step 2: Click header section to display the menu for editing**

a menu will display and you can edit header here. You can edit or add all components for headers

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2F9FBu8YRTIZwjBZtN2dOF%2Fheader-settings-kababi-5.png?alt=media&#x26;token=5caad215-b85c-413e-9f14-664bc3421005" alt=""><figcaption></figcaption></figure>

#### **Step 3: Config general settings**

**+ Show the Structure**

The structure is used to display all elements of the header

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2FDu2OxI5rE0FDeumA3UH8%2Fheader-settings-kababi-6.png?alt=media&#x26;token=2ba9dc45-baad-4dd4-aa26-496bdda26dcf" alt=""><figcaption></figcaption></figure>

**+ Create Sticky Header**

A **sticky header** is a navigation bar (or header) that **remains fixed at the top of the page** while the user scrolls down. This ensures that important navigation links, search bars, or call-to-action buttons are always accessible.

**a)** Create Sticky Header in Desktop, Tablet/Mobile.

From the menu, go to: Advanced tab >> Layout tab >> CSS Classes tab: Add the following classes as needed:ovamenu\_shrink ovamenu\_shrink\_mobile

* **header\_sticky**: Enables sticky functionality on Desktop devices.
* **mobile\_sticky**: Enables sticky functionality on Tablet/Mobile devices.
* **sticky\_bg\_dark**: Applies a dark background while scrolling

<figure><img src="https://ovatheme.gitbook.io/~gitbook/image?url=https%3A%2F%2F399016172-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG2kxo2VU_QTDsi9Ubc%252Fuploads%252FiBj5G3Z3DLzWcIivveF2%252Fheader-settings-gimont-8.png%3Falt%3Dmedia%26token%3D6233a4cc-b702-40eb-8b47-032fdc184819&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=1e69c98c&#x26;sv=2" alt=""><figcaption></figcaption></figure>

**b)** Show/hide Elements/Containers ( ex: header section ) in Desktop, Tablet/Mobile

From the menu, go to: Advanced tab >> Responsive tab

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2FLScqsD77Y5A6hNPNlLU4%2Fheader-settings-kababi-7.png?alt=media&#x26;token=bbafeb2c-e5a3-43cb-9b13-f17ce93ee7c8" alt=""><figcaption></figcaption></figure>

## IV: Change Image for Header Banner <a href="#iv-change-image-for-header-banner" id="iv-change-image-for-header-banner"></a>

***Please, note***: You need to change image for header banner with Elementor

### 1. Use an Image for all Header Banners <a href="#id-1.-use-an-image-for-all-header-banners" id="id-1.-use-an-image-for-all-header-banners"></a>

if you want to use an image for all header banners, follow below steps:

* **Step 1**: Go to: content tab in Elementor >> Display background by feature image in post/type tab: choose "No"

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2FAfzFiOTiCEoXmiEMRBl9%2Fheader-settings-kababi-8.png?alt=media&#x26;token=4c75a3a3-9340-4dcb-ae07-751c4dae49ca" alt=""><figcaption></figcaption></figure>

* **Step 2**: Go to: Advanced tab >> Background

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2F0RS94D01Z02zH6FqnRcP%2Fheader-settings-kababi-9.png?alt=media&#x26;token=1423671d-d61e-4b12-b2a4-38b882b0a0c4" alt=""><figcaption></figcaption></figure>

* **Step 3**: Click the Public button

### 2. Use a Private Image for a Particular Banner <a href="#id-2.-use-a-private-image-for-a-particular-banner" id="id-2.-use-a-private-image-for-a-particular-banner"></a>

Suppose that you want to use a private image for the banner of "About Us" page, follow below steps:

* **Step 1**: Login site with Administrator account, go to: frontend >> About Us page>> Elementor in the Site Bar, select: header Banner.

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2F2cXsNzHK3eHOmhqAMPTy%2Fheader-settings-kababi-10.png?alt=media&#x26;token=b7057e95-a3ca-48fe-ace7-d7cb4ea9c958" alt=""><figcaption></figcaption></figure>

* **Step 2**: Go to: content tab in Elementor >> Display background by feature image in post/type tab: choose "Yes"

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2FTXF8tqNFoHoSwRojdFVM%2Fheader-settings-kababi-11.png?alt=media&#x26;token=b358cc50-1899-48fe-876c-2cd4e02ff2b0" alt=""><figcaption></figcaption></figure>

* **Step 3**: Go to the page you want to change header image for it and set featured image for the page, then press "save" button.

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2FfQOYWtEpxp6ycsaXLyF8%2Fheader-settings-kababi-12.png?alt=media&#x26;token=fd4037f5-f6ae-4437-8f14-914a00ce41c8" alt=""><figcaption></figcaption></figure>

* **Step 4**: Go to Frontend to see

<figure><img src="https://1997762509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgxM1WK94hpub47iV1z%2Fuploads%2FYx6SjLbyaDV4xWvHJPlZ%2Fimage.png?alt=media&#x26;token=cfd6f7f9-9ed2-45f8-8ec4-c5aaf7eaa3e1" alt=""><figcaption></figcaption></figure>

**Please, note**: Watch video for detailed guide on how to change image of header banner

{% embed url="<https://www.youtube.com/watch?t=11s&v=7Z4zVUiCCVw>" %}