Fancy nav

These modular elements can be readily used and customized in every layout across pages.

Throughout the theme, we have used the side navigation panel. The structure is following:

<nav class="fancynavbar" data-zanim-md='{"from":{"opacity":1,"x":70},"to":{"opacity":1,"x":0},"ease":"CubicBezier","duration":0.8,"delay":0.3}' data-zanim-xs='{"from":{"opacity":1,"y":-48},"to":{"opacity":1,"y":0},"ease":"CubicBezier","duration":0.8,"delay":0.3}' data-zanim-trigger="scroll" data-exclusive="true">
	<div class="fancynavbar-togglerbar">
		<a class="fancynavbar-brand" href="#">
			<img class="fancynavbar-brand-img" src="assets/img/logo-sparrow-invert.svg" alt="" width="30" height="30" data-zanim-lg='{"from":{"opacity":0,"x":45},"to":{"opacity":1,"x":0},"ease":"CubicBezier","duration":0.8,"delay":0.4}' data-zanim-trigger="scroll"/>
			<!--You can use icon or text logo as well-->
			<!--<span class='fab fa-superpowers fs-3'></span>-->
			<!--<span class='logo-sparrow'>S</span>-->
		</a>
		<div class="fancynavbar-toggler">
			<svg class="fancynavbar-toggler-icon" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg" data-zanim-lg='{"from":{"opacity":0,"x":45},"to":{"opacity":1,"x":0},"ease":"CubicBezier","duration":0.8,"delay":0.5}' data-zanim-trigger="scroll">
				<path id="path-top" d="M20,25c0,0,22,0,30,0c16,0,18.89,40.71-.15,21.75C38.7,35.65,19.9,16.8,19.9,16.8"></path>
				<path id="path-middle" d="M20,32h30"></path>
				<path id="path-bottom" d="M19.9,46.98c0,0,18.8-18.85,29.95-29.95C68.89-1.92,66,38.78,50,38.78c-8,0-30,0-30,0"></path>
			</svg>
		</div>
		<div class="fancynavbar-addon" data-zanim-lg='{"from":{"opacity":0,"x":45},"to":{"opacity":1,"x":0},"ease":"CubicBezier","duration":0.8,"delay":0.4}' data-zanim-trigger="scroll">
			<a class="fancynavbar-addon-item" href="#"><span class="fab fa-twitter"></span></a>
			<a class="fancynavbar-addon-item" href="#" data-remodal-target="language"><span class="text-sans-serif ls font-weight-black fs--1">EN</span></a>
		</div>
	</div>
	<div class="fancynavbar-collapse">
		<ul class="fancynavbar-nav">
			<li class="fancynav-item fancy-dropdown">
				<a class="fancynav-link fancy-dropdown-toggle" href="JavaScript:void(0)"><span class="fancynav-link-content">Dropdown</span></a>
				<div class="fancy-dropdown-menu">
					<div class="row pb-4">
						<div class="col-auto pt-3">
							....
							<a class="fancy-dropdown-item" href="#">Dropdown Link 1</a>
							<a class="fancy-dropdown-item" href="#">Dropdown Link 2</a>
							....
						</div>
					</div>
				</div>
			</li>
			....
			<li class="fancynav-item">
				<a class="fancynav-link" href="#"><span class="fancynav-link-content">Nav Link</span></a>
			</li>
			....
		</ul>
	</div>
</nav>

Available Options

Togglebar Background

To change the background of the fancynav bar, add the css class for available background colors . eg:

<div class="fancynavbar-togglerbar bg-primary">

Fancynavbar Collapse Background

To change the background of the fancynav collapsible area, add the scss variable $fancynav-collapse-bg in your _user-variables.scss. Example:

$fancynav-collapse-bg: #ff0000;

See more on customization with SCSS here.

Fancynavbar link color

To change the color of the fancynav links, add the scss variable $fancynav-link-color in your _user-variables.scss. Example:

$fancynav-link-color: #000000;

See more on customization with SCSS here.

Fancynavbar Position:

By default, we position the fancynavbar on the right side of the window. But you can move the fancynavbar to the left or top if you like.

Position Left:

To move the fancynavbar to the left side of the window, use .has-sidemenu-left with the <body> tag and class fancynavbar-left with the .fancynavbar. This will behave in reverse for the RTL layout. You can see the left navigation layout in action on the cafe page.

<body class="has-sidemenu has-sidemenu-left">...</body>

<nav class="fancynavbar fancynavbar-left">...</nav>

Position Top:

To move the fancynavbar to the top side of the window, use .has-fancynav-top with the <body> tag and class fancynavbar-top with the .fancynavbar. You can also see the top navigation layout in action on the ecommerce page.

<body class="has-sidemenu has-fancynav-top">...</body>

<nav class="fancynavbar fancynavbar-top">...</nav>

On scroll fade in

To make the background fade in on scroll on mobile/tab devices, like you see in the event page, use data-onscroll-fade-in="true" eg:

<div class="fancynavbar-togglerbar bg-primary" data-onscroll-fade-in="true">

Exclusive

If you want to allow one dropdown to be opened at a time, use data-exclusive="true" with .fancynavbar eg:

<div class="fancynavbar" data-exclusive="true">