✨
aovis
  • Global
    • Install Theme
  • Update Theme/Plugin
    • Automatic Update
    • Manual Update
  • Support Theme
  • Basic
    • Theme Options
      • Typography
      • Color
      • Layout
      • Header
      • Footer
      • Blog
      • Site Identity
  • Header Settings
  • Update Footer
  • Mailchimp
  • Contact Form
  • Translation
  • Icons
  • Movie
    • READ FIRST
    • Manage Movie
    • Manage Room
    • Manage Showtime
    • Setup movie ticket booking process
    • Manage Bookings
    • Manage Tickets
    • Manage Cast
    • Settings
  • Scan QR Code
    • READ FIRST
    • Application
    • Website
  • Events
    • Settings
    • Category
    • Event
Powered by GitBook
On this page
  • 1: General Settings
  • 1.1 Show the Structure
  • 1.2 Create Sticky Header
  • 2: Change Header for a Page
  • 3: How to choose a Header for All Pages.
  • Step 1: Choose Header in Global
  • Step 2: Choose Header for Blog Pages & Shop Pages
  • 4: Change Data for Header

Header Settings

PreviousSite IdentityNextUpdate Footer

Last updated 22 days ago

1: General Settings

Step 1: Login site with Administrator account, go to frontend, move on Edit with Elementor in the Site Bar, select: header.

Step 2: Click header section, a menu will display and you can edit header here

1.1 Show the Structure

The structure is used to display all elements of the header

1.2 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:

  • 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.

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

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

2: Change Header for a Page

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.

Options in Header Version drop-down:

  • Global: Use the header that is set in Appearance >> Customize >> Header. click here for more details.

  • Default: Use Default Header. You only can customize this header in template file (header.php file in theme)

  • Header, Header Banner: Choose one of these headers for the page.

3: How to choose a Header for All Pages.

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

Step 1: Choose Header in Global

Go to Appearance >> Customize >> Header, select: Header Banner

Please, note: The header you select in this section will be applied to all pages except some pages like the blog pages, shop pages. Therefore, if you want to choose "header 1" for 2 both the blog pages, shop pages, follow the step 2 to do this.

Step 2: Choose Header for Blog Pages & Shop Pages

  • Go to: Appearance >> Customize >> Blog >> Archive >> Header tab: Select Header 1

  • Go to Appearance >> Customize >> Blog >> Single >> Header tab: Select Header 1

  • Go to Appearance >> Customize >> WooCommerce >> Product Catalog >> Header tab: Select Header 1.

  • Go to Appearance >> Customize >> WooCommerce >> Product Detail >> Header tab: Select Header 1.

4: Change Data for Header

If you want to change the data for a header (e.g., logo, phone, social networks, etc.) :

  • Use Elementor if the header was built with Elementor.

  • Modify the data in the theme file (template-parts/header-default.php) if the header is the default header.

Please, note: When you change logo in site identity ( appearance >> Customize >> Site indentity ), this change will apply to default headers. With headers created by elementor, to change logo, you need to make it with Elementor.