✨
remons
  • Global
    • Install Theme
    • Update Theme/Plugin
      • Automatic Update
      • Manual Update
  • Support Theme
  • Basic
    • Header Settings
    • Footer Settings
    • Create A Page
    • Mailchimp
    • Contact Form
    • Translate Words
    • Icons
    • Layout
    • Color
    • Blog
    • WooCommerce
    • Typography
  • Main Features
    • Elements in Elementor
      • BRW
      • Remons
        • Product List
        • Category Filter Slider
        • Ajax Quick Booking
        • Category Thumbnail Grid
        • Category Thumbnail Slider
        • Category Thumbnail 2
        • Product Search Ajax
        • Product Search
        • Product Slider 2
        • Latest Products
        • Gallery Filter
        • Gallery Service
        • Offer Service
        • Ova Animated Headline
        • Blog Slider
        • Blog
        • Contact Info
        • Counter List
        • Ova Counter
        • Ova heading
        • Ova Icon Box
        • Ova Icon Box 2
        • Image Gallery
        • Images Slider
        • Latest Posts
        • My Account Button
        • Our Team
        • Progress Circle
        • Scroll Bar
        • Search
        • Switch Language
        • Ova Testimonial
        • Ova Testimonial 2
        • Ova Testimonial 3
        • Ova Video
        • Vertical Slider
        • Working Process
      • Header Footer
        • Header Banner
        • Logo
        • Menu Canvas
        • Menu
        • Menu Cart
        • Search Popup
    • BRW Plugin Documentation
  • FAQs
    • Edit [remons-elementor-template id="1"]
Powered by GitBook
On this page
  • I: Choose a Header for All Pages.
  • Step 1: Choose Header in Global
  • Step 2: Choose Header for Blog Pages & Shop Pages
  • Step 3: Choose "Global" Option in Header Version Drop-Down of All Pages
  • II: Choose a Header for a Page
  • III: Modify Data for Header
  • 1: Change Data for Default Header
  • 2: Change Data for Headers Built in Elementor
  • IV: Change Image for Header Banner
  • 1. Use an Image for all Header Banners
  • 2. Use a Private Image for a Particular Banner
  • V: Create Mega Menu
  • 1. Configure in the backend
  • 2. Display in the Front end
  1. Basic

Header Settings

PreviousSupport ThemeNextFooter Settings

Last updated 2 months ago

I: Choose a Header for All Pages.

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

Step 1: Choose Header in Global

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

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

Step 3: Choose "Global" Option in Header Version Drop-Down of All Pages

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.

II: Choose a Header for a Page

Go to Pages >> All Pages: choose a page that want to change its header, then 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

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

  • Header 1, Header 2, Header 3: If you choose one of these headers, you can edit them in Builder Header Footer >> All HF

III: Modify Data for Header

Our theme supports 2 header types:

  • Default header

  • Headers built in Elementor

1: Change Data for Default Header

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

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

  • 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: Change Data for Headers Built in Elementor

You have to use Elementor to modify data for these headers

Step 1: To edit these headers with Elementor, 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.

  • 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

Step 2: Choose header section and edit

You can edit all components of headers ( logo, menu, cart ... ) and add new elements for headers

Step 3: General Settings

+ Show the Structure

The structure is used to display all elements of the header

+ 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

IV: Change Image for Header Banner

You need to change image for header banner with Elementor

1. Use an Image for all Header Banners

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"

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

  • Step 3: Click the Public button

2. Use a Private Image for a Particular Banner

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

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

  • Step 2: Go to the page you want to change header image for it and set feature image for the page, then press "save" button

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

V: Create Mega Menu

1. Configure in the backend

Go to: Appearance >> Menus >> Select "Primary Menu", then you move on Mega Menu

In Parent Menu, choose Menu Column: Support 1,2,3,4,5 columns

In Child Menu: Insert a short code of each page, then check the box: "Show as a heading"

Please, note:

Example Short code: [remons-elementor-template id="6214"]

This shortcode will show a template in Elementor. To display a template, you need to insert ID of it

See the below image to know how to find ID

Please, note: You have to choose " primary menu " option

2. Display in the Front end

use shortcode:

[remons-elementor-template] here
Setup Mega Menu
Setup Column 1
Setup Column 2
Setup Column 3
Setup Column 4