Navbar Configuration

The navbar hide style values are of array of strings type and can be configured as follows:

Navbar Hide
  • Property: "header_navbar_show"
  • Choices: "iq-navbar-none"

Example

"header_navbar_show": { "value" : [] }

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

Navbar Style
  • Property: "header_navbar"
  • Choices: "default", "navs-sticky", "nav-glass", "navs-transparent"

Example

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

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 three different ways:

a. By Declaring Properties in gulp.config.json

Example gulp.config.json:

"options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting-html",
    "setting":{
        "header_navbar_show": { "value": [ "iq-navbar-none" ] },
        "header_navbar": { "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 gulp.config.json file.
Before:
"options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting-html",
    "setting":{
        "header_navbar_show": { "value": [ "iq-navbar-none" ] },
        "header_navbar": { "value": "default" },
    }
},
After:
"options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting-html",
    "setting":{
        "header_navbar_show": { "value": [ "iq-navbar-none" ] },
        "header_navbar": { "value": "default" },
    }
},
c. By Adding Properties in the Tag

Example <meta> tag:

<head>
    <meta name="setting_options"
    content="{
        "saveLocal":"sessionStorage",
        "storeKey":"huisetting-html",
        "setting":{
            "header_navbar_show": { "value": [ "iq-navbar-none" ] },
            "header_navbar": { "value": "default" },
        }
    }>
</head>
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