Header Banner Configuration

  • To get the default value of Header style, navigate to this pathsrc/app/store/setting/state.ts
Header Style
  • Property: "header_banner"
  • Choices: "default", "navs-bg-color", "hide"

Example

"header_banner": {"value": "default"}",

Changing Header Banner Settings

There are two ways to change the header banner settings:

1. Using the Live Customizer

You can work on header banner using the Live Customizer in two different ways:

a. By Declaring Properties in setting.ts

Example setting.ts:

"export const defaultState: SettingDefaultState = {
  "saveLocal": "sessionStorage",
  "storeKey": "huisetting",
  "setting": {
    header_banner: {
      target: ".iq-banner",
      choices: ["default", "navs-bg-color", "hide"],
      type: "layout_design",
      value: "default",
    },
  }
},
b. By Copying Configuration from the Live Customizer
  1. Go to the Live Customizer and click the 'Copy Config' button at the top-right to copy the JSON file from the settings panel.
  2. Replace the copied code into the options object in the setting.ts file.
Before:
"export const initialState: SettingState = {
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting-angular",
    "setting":{
       "header_navbar": { "value": "default" },
    }
},
After:
"export const initialState: SettingState = {
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting-angular",
    "setting":{
       "header_navbar": { "value": "hide" },
    }
},
1. Manual Configuration

You can change the header banner with a single action by adding the appropriate class to the <div> tag with class ".iq-navbar" class.

header banner

To change the header banner, set the class in div with ".iq-navbar" class:

  • Banner Default:
  • <div class="default">
        .......
    </div>
  • Banner Background:
  • <div class="navs-bg-color">
        .......
    </div>
  • Banner Hide:
  • <div class="hide">
        .......
    </div>