Navbar Configuration

  • To get the default value of Navbar style, navigate to this pathsrc/app/store/setting/state.ts
Navbar Style
  • Property: "header_navbar"
  • Choices: "default","fixed","navs-sticky","nav-glass","navs-transparent","boxed","hidden",

Example

"header_navbar": {"value": "default"},

The navbar style values are of string type and can be configured as follows:

Header Navbar Hide
  • Property: "navbar_show"
  • Choices: navbar-none
  • If you want to default to none navbar , then pass "iq-navbar-none" as the value in the following code snippet.
  • Values are in array

Example

"navbar_show": { "value": [] },

Changing Navbar Settings

There are two ways to change the navbar settings:

1. Using the Live Customizer

You can work on navbar 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_navbar: {
      target: ".iq-navbar",
      choices: ["default","fixed","navs-sticky","nav-glass","navs-transparent","boxed","hidden",],
      type: "layout_design",
      value: "default",
    },
    navbar_show: {
      target: '[data-toggle="main-navbar"]',
      choices: ["navbar-none"],
      type: "layout_design",
      value: [],
    },
  }
},
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"
    },
    "navbar_show": {
      "value": []
    },
  }
},
After:
"export const initialState: SettingState = {
  "saveLocal": "sessionStorage",
  "storeKey": "huisetting-angular",
  "setting": {
    "header_navbar": {
      "value": "nav-glass"
    },
    "navbar_show": {
      "value": [navbar-none]
    },
  }
},
1. Manual Configuration

You can change the navbar visibility with a single action by adding the appropriate classes to the <nav> tag.

Navbar Visibility

To change the Navbar Visibility, set the class in nav:

  • Navbar Hide:
    • <nav class="iq-navbar-none">
    .......
</nav>
Navbar Style

To change the Navbar Style, set the class in nav:

  • Navbar Default:
    • <nav class="navs-default">
    .......
</nav>
  • Navbar Glass:
    • <nav class="navs-glass">
    .......
</nav>
  • Navbar Sticky:
    • <nav class="navs-sticky">
    .......
</nav>
  • Navbar Transparent:
    • <nav class="navs-transparent">
    .......
</nav>
Previous Next