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 fancynavbar-expand-lg" data-zanim-lg='{"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":-37},"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="../../index.html"><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 fancynavbar-addon-height" data-zanim-lg='{"from":{"opacity":1,"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="#languageModal" data-bs-toggle="modal"><span class="font-sans-serif ls fw-black fs--1 d-block">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">homes</span></a>
<div class="fancy-dropdown-menu">
<div class="row pb-4 pt-3">
<div class="col-auto"><a class="false fancy-dropdown-item" href="../../homes/default.html"> Default</a><a class="false fancy-dropdown-item" href="../../homes/bicycle.html"> Bicycle</a><a class="false fancy-dropdown-item" href="../../homes/bigcartel.html"> Bigcartel</a><a class="false fancy-dropdown-item" href="../../homes/cafe.html"> Cafe</a><a class="false fancy-dropdown-item" href="../../homes/digital.html"> Digital</a><a class="false fancy-dropdown-item" href="../../homes/ecommerce.html"> Ecommerce</a><a class="false fancy-dropdown-item" href="../../homes/event.html"> Event</a><a class="false fancy-dropdown-item" href="../../homes/interior.html"> Interior</a><a class="false fancy-dropdown-item" href="../../homes/landing.html"> Landing</a><a class="false fancy-dropdown-item" href="../../homes/promotion.html"> Promotion</a><a class="false fancy-dropdown-item" href="../../homes/software.html"> Software</a><a class="false fancy-dropdown-item" href="../../homes/studio.html"> Studio</a>
</div>
</div>
</div>
</li>
<li class="fancynav-item fancy-dropdown"><a class="fancynav-link fancy-dropdown-toggle" href="JavaScript:void(0)"><span class="fancynav-link-content">pages</span></a>
<div class="fancy-dropdown-menu">
<div class="row pb-4 pt-3">
<div class="col-sm-auto pe-4"><a class="false fancy-dropdown-item" href="../../pages/404.html"> 404</a><a class="false fancy-dropdown-item" href="../../pages/about.html"> About</a><a class="false fancy-dropdown-item" href="../../pages/blog.html"> Blog</a><a class="false fancy-dropdown-item" href="../../pages/blog-single.html"> Blog single</a><a class="false fancy-dropdown-item" href="../../pages/cart.html"> Cart</a><a class="false fancy-dropdown-item" href="../../pages/casestudy.html"> Casestudy</a><a class="false fancy-dropdown-item" href="../../pages/coming-soon.html"> Coming soon</a><a class="false fancy-dropdown-item" href="../../pages/contact.html"> Contact</a><a class="false fancy-dropdown-item" href="../../pages/one-page.html"> One page</a><a class="false fancy-dropdown-item" href="../../pages/portfolio.html"> Portfolio</a>
</div>
<div class="col-sm-auto pe-4"><a class="false fancy-dropdown-item" href="../../pages/profile.html"> Profile</a><a class="false fancy-dropdown-item" href="../../pages/rtl.html"> RTL</a><a class="false fancy-dropdown-item" href="../../pages/services.html"> Services</a><a class="false fancy-dropdown-item" href="../../pages/shop.html"> Shop</a><a class="false fancy-dropdown-item" href="../../pages/signin.html"> Signin</a><a class="false fancy-dropdown-item" href="../../pages/signup.html"> Signup</a><a class="false fancy-dropdown-item" href="../../pages/product-single.html"> Product single</a><a class="false fancy-dropdown-item" href="../../pages/split-static.html"> Split static</a><a class="false fancy-dropdown-item" href="../../pages/split-youtube.html"> Split youtube</a><a class="false fancy-dropdown-item" href="../../pages/starter.html"> Starter</a>
</div>
</div>
</div>
</li>
<li class="fancynav-item fancy-dropdown"><a class="fancynav-link fancy-dropdown-toggle" href="JavaScript:void(0)"><span class="fancynav-link-content">components</span></a>
<div class="fancy-dropdown-menu">
<div class="row pb-2 pt-3">
<div class="col-sm-auto mb-3">
<div class="row">
<div class="col-sm-auto pe-4"><a class="fancy-dropdown-title fw-black ls fs--1 mb-1" href="JavaScript:void(0)">Sparrow</a><a class="false fancy-dropdown-item" href="../../components/sparrow/accordion.html"> Accordion</a><a class="false fancy-dropdown-item" href="../../components/sparrow/anchor.html"> Anchor</a><a class="false fancy-dropdown-item" href="../../components/sparrow/backgrounds.html"> Backgrounds</a><a class="false fancy-dropdown-item" href="../../components/sparrow/borders.html"> Borders</a><a class="false fancy-dropdown-item" href="../../components/sparrow/carousel.html"> Carousel</a><a class="false fancy-dropdown-item" href="../../components/sparrow/colors.html"> Colors</a><a class="false fancy-dropdown-item" href="../../components/sparrow/cookie-notice.html"> Cookie notice</a><a class="false fancy-dropdown-item" href="../../components/sparrow/countdown.html"> Countdown</a><a class="false fancy-dropdown-item" href="../../components/sparrow/countup.html"> Countup</a><a class="false fancy-dropdown-item" href="../../components/sparrow/fancynav.html"> Fancynav</a><a class="false fancy-dropdown-item" href="../../components/sparrow/filter.html"> Filter</a>
</div>
<div class="col-sm-auto pe-4"><a class="false fancy-dropdown-item" href="../../components/sparrow/googlemap.html"> Googlemap</a><a class="false fancy-dropdown-item" href="../../components/sparrow/icons.html"> Icons</a><a class="false fancy-dropdown-item" href="../../components/sparrow/inline-player.html"> Inline player</a><a class="false fancy-dropdown-item" href="../../components/sparrow/lightbox.html"> Lightbox</a><a class="false fancy-dropdown-item" href="../../components/sparrow/masonry.html"> Masonry</a><a class="false fancy-dropdown-item" href="../../components/sparrow/parallax.html"> Parallax</a><a class="false fancy-dropdown-item" href="../../components/sparrow/progressbar.html"> Progressbar</a><a class="false fancy-dropdown-item" href="../../components/sparrow/spacing.html"> Spacing</a><a class="false fancy-dropdown-item" href="../../components/sparrow/typed-text.html"> Typed text</a><a class="false fancy-dropdown-item" href="../../components/sparrow/typography.html"> Typography</a><a class="false fancy-dropdown-item" href="../../components/sparrow/zanimation.html"> Zanimation</a>
</div>
</div>
</div>
<div class="col-sm-auto pe-3 mb-3"><a class="fancy-dropdown-title fw-black ls fs--1 mb-1" href="JavaScript:void(0)">Bootstrap</a><a class="false fancy-dropdown-item" href="../../components/bootstrap/badges.html"> Badges</a><a class="false fancy-dropdown-item" href="../../components/bootstrap/buttons.html"> Buttons</a><a class="false fancy-dropdown-item" href="../../components/bootstrap/cards.html"> Cards</a><a class="false fancy-dropdown-item" href="../../components/bootstrap/forms.html"> Forms</a><a class="false fancy-dropdown-item" href="../../components/bootstrap/modals.html"> Modals</a><a class="false fancy-dropdown-item" href="../../components/bootstrap/navbar.html"> Navbar</a><a class="false fancy-dropdown-item" href="../../components/bootstrap/scrollspy.html"> Scrollspy</a><a class="false fancy-dropdown-item" href="../../components/bootstrap/sizing.html"> Sizing</a><a class="false fancy-dropdown-item" href="../../components/bootstrap/tables.html"> Tables</a><a class="false fancy-dropdown-item" href="../../components/bootstrap/tabs.html"> Tabs</a><a class="false fancy-dropdown-item" href="../../components/bootstrap/tooltips.html"> Tooltips</a>
</div>
</div>
</div>
</li>
<li class="fancynav-item fancy-dropdown"><a class="fancynav-link fancy-dropdown-toggle" href="JavaScript:void(0)"><span class="fancynav-link-content">documentation</span></a>
<div class="fancy-dropdown-menu">
<div class="row pb-4 pt-3">
<div class="col-auto"><a class="false fancy-dropdown-item" href="../../documentation/getting-started.html"> Getting started</a><a class="false fancy-dropdown-item" href="../../documentation/file-structure.html"> File structure</a><a class="false fancy-dropdown-item" href="../../documentation/customization.html"> Customization</a><a class="false fancy-dropdown-item" href="../../documentation/gulp.html"> Gulp</a><a class="false fancy-dropdown-item" href="../../documentation/rtl.html"> RTL</a><a class="false fancy-dropdown-item" href="../../documentation/plugins.html"> Plugins</a><a class="false fancy-dropdown-item" href="../../documentation/changelog.html"> Changelog</a>
</div>
</div>
</div>
</li>
<li class="fancynav-item"><a class="fancynav-link" href="../../pages/portfolio.html"><span class="fancynav-link-content">portfolio</span></a></li>
<li class="fancynav-item"><a class="fancynav-link" href="../../pages/contact.html"><span class="fancynav-link-content">contact</span></a></li>
</ul>
</div>
</nav>Available Options
Responsive behavior
Sparrow use .fancynavbar-expand{-sm|-md|-lg|-xl} classes to decide when the navbar vertical will expand or not.
<nav class="fancynavbar fancynavbar-expand-sm"></nav>
<nav class="fancynavbar fancynavbar-expand-md"></nav>
<nav class="fancynavbar fancynavbar-expand-lg"></nav>
<nav class="fancynavbar fancynavbar-expand-xl"></nav>Fancynavbar Colors:
You can customize Fancynav with both SCSS and CSS variables according to your requirements.
Customize with SCSS variables:
To customize the fancynavbar, using SCSS variables, add the following variables in _user-variables.scss and update according to your requirement.
$fancynav-togglerbar-bg: #ffffff;
$fancynav-collapse-bg: #ffffff;
$fancynav-link-color: #000000;Customize with CSS variables:
To customize the fancynavbar, using CSS variables, add the following variables in user.scss and update according to your requirement.
--sparrow-fancynav-togglerbar-bg: #ffffff;
--sparrow-fancynav-collapse-bg: #ffffff;
--sparrow-fancynav-link-color: #000000;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 <html> 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 .
<html class="has-sidemenu has-sidemenu-left" dir="ltr" lang="en-US">
<!-- Your content goes here-->
</html><nav class="fancynavbar fancynavbar-expand-lg fancynavbar-left">...</nav>Position Top:
To move the fancynavbar to the top side of the window, use .has-fancynav-top with the <html> tag and class fancynavbar-top with the .fancynavbar. You can also see the top navigation layout in action on the ecommerce page.
<html class="has-sidemenu has-fancynav-top" dir="ltr" lang="en-US">
<!-- Your content goes here-->
</html><nav class="fancynavbar fancynavbar-expand-lg 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"></div>Exclusive
If you want to allow one dropdown to be opened at a time, use data-exclusive="true" with .fancynavbar eg:
<div class="fancynavbar fancynavbar-expand-lg" data-exclusive="true"></div>