# 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://399016172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MG2kxo2VU_QTDsi9Ubc%2Fuploads%2FaO1VW7Gw1VvCPWbc2U6Q%2Fheader-settings-gimont.png?alt=media&#x26;token=2ece42ca-0ec6-4279-9f25-3f5ba41aca76" alt=""><figcaption></figcaption></figure>

**Please, note**: The header you select in this section will be applied to all pages except some pages like the blog pages, shop pages, department pages, directory pages, document pages, portfolio pages, service pages, team pages. Therefore, if you want to choose "Header 1" for these pages, follow the step 2 to do this.

#### Step 2: Choose Header for blog pages, shop pages, department pages, directory pages, document pages, portfolio pages, service pages, team pages <a href="#step-2-choose-footer-for-blog-pages-and-shop-pages" id="step-2-choose-footer-for-blog-pages-and-shop-pages"></a>

* Go to Appearance >> Customize >> Blog >> Archive >> Header Dropdown: choose "Header 1".
* Go to Appearance >> Customize >> Blog >> Single >> Header Dropdown: choose "Header 1".
* Go to Appearance >> Customize >> WooCommerce >> Product Catalog >> Header Dropdown: choose "Header 1".
* Go to Appearance >> Customize >> WooCommerce >> Product Detail >> Header Dropdown: choose "Header 1".
* Go to Appearance >> Customize >> Department >> Archive >> Header Dropdown: choose "Header 1".
* Go to Appearance >> Customize >> Department >> Single >> Header Dropdown: choose "Header 1".
* Go to Appearance >> Customize >> Directory >> Archive >> Header Dropdown: choose "Header 1".
* Go to Appearance >> Customize >> Directory >> Single >> Header Dropdown: choose "Header 1".
* Go to Appearance >> Customize >> Document >> Archive >> Header Dropdown: choose "Header 1".
* Go to Appearance >> Customize >> Document >> Single >> Header Dropdown: choose "Header 1".
* Go to Appearance >> Customize >> Portfolio >> Archive >> Header Dropdown: choose "Header 1".
* Go to Appearance >> Customize >> Portfolio >> Single >> Header Dropdown: choose "Header 1".
* Go to Appearance >> Customize >> Service >> Archive >> Header Dropdown: choose "Header 1".
* Go to Appearance >> Customize >> Service >> Single >> Header Dropdown: choose "Header 1".
* Go to Appearance >> Customize >> Team >> Archive >> Header Dropdown: choose "Header 1".
* Go to Appearance >> Customize >> Team >> Single >> Header Dropdown: choose "Header 1".

#### Step 3: 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://399016172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MG2kxo2VU_QTDsi9Ubc%2Fuploads%2F0KifS9P8YB6nA4MAZDcI%2Fheader-settings-gimont-1.png?alt=media&#x26;token=1693e68b-9bd0-48b5-a0be-ccd2e1edf462" 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://399016172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MG2kxo2VU_QTDsi9Ubc%2Fuploads%2FBJgosimIMMD7QjuPkh3u%2Fimage.png?alt=media&#x26;token=0df61044-9591-4cd3-9152-11b7cb4dd95c" alt=""><figcaption></figcaption></figure>

Options in Header Version drop-down:

* **Global**: Use the header that is set in Appearance >> Customize >> Header
* **Default**: Use Default Header. You only can customize this header in template file ( header.php file in theme)
* **Header, Header 1, Header 2, Header 3, Header 4, Header 5, Header 6, Header 7, Header 8, Header 9, Header Primary**: 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://399016172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MG2kxo2VU_QTDsi9Ubc%2Fuploads%2FE9Tcf000B10alFobOFtp%2Fheader-settings-gimont-2.png?alt=media&#x26;token=0678e6ba-fc9e-485b-9c59-02c3332163be" 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://399016172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MG2kxo2VU_QTDsi9Ubc%2Fuploads%2FAOARLdp4dNi9E9Ml8iTh%2Fheader-settings-gimont-3.png?alt=media&#x26;token=9a192153-5c79-4bd5-82b4-bb8ac0de4826" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://399016172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MG2kxo2VU_QTDsi9Ubc%2Fuploads%2FiZ66BQDf5bquA6xLTnCb%2Fheader-settings-gimont-4.png?alt=media&#x26;token=e1cbc488-882d-447f-9c42-9c07291b37f8" 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://399016172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MG2kxo2VU_QTDsi9Ubc%2Fuploads%2FkIkwk0WrQWsSFhiiScRC%2Fheader-settings-gimont-5.png?alt=media&#x26;token=40fed35d-b215-41a9-8a8f-3ae651c2e06b" 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://399016172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MG2kxo2VU_QTDsi9Ubc%2Fuploads%2FqTVRFIqnPGeXk0b6u3fG%2Fimage.png?alt=media&#x26;token=11c1a122-1a64-44de-8d5e-5e66005d2540" 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://399016172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MG2kxo2VU_QTDsi9Ubc%2Fuploads%2FExeMlgqZUWxtKDuK3cVa%2Fheader-settings-gimont-6.png?alt=media&#x26;token=5f3deb87-6174-45a8-a595-f97ade02e2b7" 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://399016172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MG2kxo2VU_QTDsi9Ubc%2Fuploads%2FDO5qbH8Mzc1NfiqIjKUi%2Fheader-settings-gimont-7.png?alt=media&#x26;token=262551bc-28c1-4afd-b5a0-c174ea788a9a" 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://399016172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MG2kxo2VU_QTDsi9Ubc%2Fuploads%2FiBj5G3Z3DLzWcIivveF2%2Fheader-settings-gimont-8.png?alt=media&#x26;token=6233a4cc-b702-40eb-8b47-032fdc184819" 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://399016172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MG2kxo2VU_QTDsi9Ubc%2Fuploads%2FaiIjJxdsgdz2FZI0WH2Z%2Fheader-settings-gimont-9.png?alt=media&#x26;token=eea0dc9a-bbbf-4b86-a2b2-7d12c0379a1a" 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://399016172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MG2kxo2VU_QTDsi9Ubc%2Fuploads%2FJ5ilZHsWd1NiL40sT1HV%2Fheader-settings-gimont-10.png?alt=media&#x26;token=5dcc6883-c4f7-4dec-a10c-1eabf769b793" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://399016172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MG2kxo2VU_QTDsi9Ubc%2Fuploads%2FLxqTmcnMqmEHd2EZh1hs%2Fheader-settings-gimont-11.png?alt=media&#x26;token=d9478265-af6c-4c5f-b802-596a90b49eaf" 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>

If you want to use a private image for a particular banner, follow below steps:

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

<figure><img src="https://399016172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MG2kxo2VU_QTDsi9Ubc%2Fuploads%2FL4Ctil42aTHXU8jZiE1M%2Fheader-settings-gimont-12.png?alt=media&#x26;token=bdeec311-1fa3-4775-a2cc-758c533dccf5" alt=""><figcaption></figcaption></figure>

* **Step 2**: 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://399016172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MG2kxo2VU_QTDsi9Ubc%2Fuploads%2FfuW6AEy3fG4lyl5DHBiX%2Fheader-settings-gimont-13.png?alt=media&#x26;token=6d30c198-af8d-4b25-b7af-c5224a67f092" alt=""><figcaption></figcaption></figure>

* **Step 3**: Go to Frontend to see

<figure><img src="https://399016172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MG2kxo2VU_QTDsi9Ubc%2Fuploads%2FPYasSrxDRJcDS9kPblZe%2Fheader-settings-gimont-14.png?alt=media&#x26;token=40120835-c970-4db7-9ae6-5a11abef33da" 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=10s&v=7Z4zVUiCCVw" %}
