Navigation

Change container class to container-fluid to make full width navigation instead of boxed

<nav class="nav-wrp nav-1">
    <div class="container-fluid"> ... </div>
</nav>

Apply data-glass=”y” attribute for transparent navigation. Main CSS file include CSS classes to set navigation transparent color. Use CSS class glass-01 to glass-09 along with “nav-wrp” in below code.

<nav class="nav-wrp nav-1" data-glass="y">
    <div class="container"> ... </div>
</nav>

Apply data-above=”y” attribute to display navigation above intro but not to set as sticky with page scroll

<nav class="nav-wrp nav-1" data-above="y">
    <div class="container"> ... </div>
</nav>

Apply data-sticky=”y” to make navigation sticky on page scroll. Sticky navigation will not work with data-above=”y”

<nav class="nav-wrp nav-1" data-sticky="y">
    <div class="container"> ... </div>
</nav>

Apply data-hide=”y” to hide navigation by default and only display on page scroll. this option require data-sticky=”y” otherwise it will not work properly.

<nav class="nav-wrp nav-1" data-sticky="y" data-hide="y">
    <div class="container"> ... </div>
</nav>

 

 

 

 

Related Articles