Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="preloader">
        <div class="classy-load"></div>
    </div>

<header class="header_area">
  <div class="main_header_area animated">
    <div class="container">
      <nav id="navigation1" class="navigation">
        <!-- Logo Area Start -->
        <div class="nav-header">
          <a class="nav-brand" href="index-minimal.html#">LOGO</a>
          <div class="nav-toggle"></div>
        </div>
        <!-- Search panel Start -->
        <div class="nav-search">
          <div class="nav-search-button">
            <i class="nav-search-icon"></i>
          </div>
          <form>
            <div class="nav-search-inner">
              <input type="search" name="search" placeholder="Type Your Keywords">
            </div>
          </form>
        </div>
        <!-- Main Menus Wrapper -->
        <div class="nav-menus-wrapper">
          <ul class="nav-menu align-to-right">
            <li><a href="index-minimal.html#">Home</a>
              <div class="megamenu-panel">
                <div class="megamenu-lists">
                  <ul class="megamenu-list list-col-4">
                    <li><a href="index.html" target="_blank">Business 1</a></li>
                    <li><a href="index-2.html" target="_blank">Business 2</a></li>
                    <li><a href="index-minimal.html" target="_blank">Business 3</a></li>
                    <li><a href="index-agency.html" target="_blank">Agency 1</a></li>
                    <li><a href="index-agency-2.html" target="_blank">Agency 2</a></li>
                    <li><a href="index-creative.html" target="_blank">Creative Light</a></li>
                    <li><a href="index-creative-dark.html" target="_blank">Creative Dark</a></li>
                    <li><a href="index-minimal-portfolio.html" target="_blank">Personal Portfolio</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-4">
                    <li><a href="index-vimeo-video.html" target="_blank">Vimeo Video</a></li>
                    <li><a href="index-youtube-video.html" target="_blank">YouTube Video</a></li>
                    <li><a href="index-local-video.html" target="_blank">HTML5 Local Video</a></li>
                    <li><a href="../classy-onepage/index-agency.html" target="_blank">Agency</a></li>
                    <li><a href="../classy-onepage/index-app-landing.html" target="_blank">App Showcase</a></li>
                    <li><a href="../classy-onepage/index-creative.html" target="_blank">Creative</a></li>
                    <li><a href="../classy-onepage/index.html" target="_blank">Business</a></li>
                    <li><a href="../classy-onepage/index-education.html" target="_blank">Education</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-4">
                    <li><a href="../classy-onepage/index-fitness-gym.html" target="_blank">Fitness &amp; Gym</a></li>
                    <li><a href="../classy-onepage/index-gardening.html" target="_blank">Gardening</a></li>
                    <li><a href="../classy-onepage/index-hosting.html" target="_blank">Hosting</a></li>
                    <li><a href="../classy-onepage/index-local-video.html" target="_blank">HTML5 Video</a></li>
                    <li><a href="../classy-onepage/index-medical.html" target="_blank">Medical</a></li>
                    <li><a href="../classy-onepage/index-minimal-portfolio.html" target="_blank">Minimal Portfolio</a></li>
                    <li><a href="../classy-onepage/index-photographer.html" target="_blank">Photography</a></li>
                    <li><a href="../classy-onepage/index-product-landing.html" target="_blank">Product Showcase</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-4">
                    <li><a href="../classy-onepage/index-restaurant.html" target="_blank">Restaurant</a></li>
                    <li><a href="../classy-onepage/index-resume.html" target="_blank">Resume &amp; CV</a></li>
                    <li><a href="../classy-onepage/index-service-landing.html" target="_blank">Service Landing</a></li>
                    <li><a href="../classy-onepage/index-slider.html" target="_blank">Slideshows</a></li>
                    <li><a href="../classy-onepage/index-spa.html" target="_blank">Spa &amp; Beauty</a></li>
                    <li><a href="../classy-onepage/index-startup.html" target="_blank">Startup</a></li>
                    <li><a href="../classy-onepage/index-vimeo-video.html" target="_blank">Vimeo Video</a></li>
                    <li><a href="../classy-onepage/index-youtube-video.html" target="_blank">YouTube Video</a></li>
                  </ul>
                </div>
              </div>
            </li>
            <li><a href="index-minimal.html#">Level 1</a>
              <ul class="nav-dropdown">
                <li><a href="index-minimal.html#">Header</a>
                  <ul class="nav-dropdown">
                    <li><a href="../classy-shortcodes/header-simple.html" target="_blank">Simple</a></li>
                    <li><a href="../classy-shortcodes/header-two-menus.html" target="_blank">Two Menus</a></li>
                    <li><a href="../classy-shortcodes/header-centered.html" target="_blank">Centered</a></li>
                    <li><a href="../classy-shortcodes/header-search-panel.html" target="_blank">Search Panel</a></li>
                    <li><a href="../classy-shortcodes/header-button-text.html" target="_blank">Button &amp; Text</a></li>
                    <li><a href="../classy-shortcodes/header-dropdown.html" target="_blank">Dropdown</a></li>
                    <li><a href="../classy-shortcodes/header-horizontal-dropdown.html" target="_blank">Horizontal Dropdown</a></li>
                    <li><a href="../classy-shortcodes/header-megamenu-list.html" target="_blank">Megamenu List</a></li>
                    <li><a href="../classy-shortcodes/header-mega-menu-tabs.html" target="_blank">Megamenu Tabs</a></li>
                    <li><a href="../classy-shortcodes/header-social-links.html" target="_blank">Social Links</a></li>
                    <li><a href="../classy-shortcodes/header-always-hidden.html" target="_blank">Always Hidden</a></li>
                    <li><a href="../classy-shortcodes/header-icon.html" target="_blank">Icons</a></li>
                    <li><a href="../classy-shortcodes/header-striped-skin.html" target="_blank">Striped Skin</a></li>
                    <li><a href="../classy-shortcodes/header-rounded-skin.html" target="_blank">Rounded Skin</a></li>
                    <li><a href="../classy-shortcodes/header-box-skin.html" target="_blank">Box Skin</a></li>
                  </ul>
                </li>
                <li><a href="index-minimal.html#">Level 2</a>
                  <ul class="nav-dropdown">
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-1.html" target="_blank">Contact Layout 1</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-2.html" target="_blank">Contact Layout 2</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-3.html" target="_blank">Contact Layout 3</a></li>
                        <li><a href="index-minimal.html#">Level 3</a>
                        <ul class="nav-dropdown">
                          <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-1.html" target="_blank">Contact Layout 1</a></li>
                          <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-2.html" target="_blank">Contact Layout 2</a></li>
                          <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-3.html" target="_blank">Contact Layout 3</a></li>
                          <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-4.html" target="_blank">Contact Layout 4</a></li>
                          <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-5.html" target="_blank">Contact Layout 5</a></li>
                          <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-6.html" target="_blank">Contact Layout 6</a></li>
                          <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-7.html" target="_blank">Contact Layout 7</a></li>
                        </ul>
                      </li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-5.html" target="_blank">Contact Layout 5</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-6.html" target="_blank">Contact Layout 6</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-7.html" target="_blank">Contact Layout 7</a></li>
                  </ul>
                </li>
                <li><a href="index-minimal.html#">Coming Soon</a>
                  <ul class="nav-dropdown">
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/coming-soon-bg-img.html" target="_blank">Coming Soon - 1</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/coming-soon-default.html" target="_blank">Coming Soon - 2</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/coming-soon-youtube-video.html" target="_blank">Coming Soon - 3</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/coming-soon-vimeo-video.html" target="_blank">Coming Soon - 4</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/coming-soon-background-color.html" target="_blank">Coming Soon - 5</a></li>
                  </ul>
                </li>
                <li><a href="../revolution-slider/index.html" target="_blank">Premium Sliders</a></li>
                <li><a href="../classy-shortcodes/index.html" target="_blank">Shortcodes <span class="label label-pill label-primary">New</span></a></li>
                <li><a href="../classy-shortcodes/breadcumb.html" target="_blank">Breadcumb</a></li>
                <li><a href="../classy-shortcodes/footer.html" target="_blank">Footer</a></li>
                <li><a href="../classy-shortcodes/icon-pe-7-stroke.html" target="_blank">Icons</a></li>
                <li><a href="../classy-shortcodes/buttons.html" target="_blank">Buttons</a></li>
                <li><a href="../classy-shortcodes/call-to-action.html" target="_blank">Call to Action</a></li>
                <li><a href="../classy-shortcodes/google-maps.html" target="_blank">Google Maps</a></li>
                <li><a href="../classy-shortcodes/pie-skills.html" target="_blank">Pie &amp; Skills</a></li>
                <li><a href="../classy-shortcodes/ratings.html" target="_blank">Ratings</a></li>
                <li><a href="../classy-shortcodes/vector-maps.html" target="_blank">Vector Maps</a></li>
              </ul>
            </li>
            <li><a href="index-minimal.html#">Pages</a>
              <div class="megamenu-panel">
                <div class="megamenu-lists">
                  <ul class="megamenu-list list-col-3">
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/about-us-1.html" target="_blank">About Us 1</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/about-us-2.html" target="_blank">About Us 2</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/about-us-3.html" target="_blank">About Us 3</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/service-1.html" target="_blank">Service Layout 1</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/service-2.html" target="_blank">Service Layout 2</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/service-3.html" target="_blank">Service Layout 3</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/404.html" target="_blank">404 Layout 1</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/404-2.html" target="_blank">404 Layout 2</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/404-3.html" target="_blank">404 Layout 3</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-3">
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/coming-soon-bg-img.html" target="_blank">Coming Soon Layout 1</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/coming-soon-default.html" target="_blank">Coming Soon Layout 2</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/coming-soon-youtube-video.html" target="_blank">Coming Soon Layout 3</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/coming-soon-vimeo-video.html" target="_blank">Coming Soon Layout 4</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/coming-soon-background-color.html" target="_blank">Coming Soon Layout 5</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/500.html" target="_blank">500 Error</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/empty-page.html" target="_blank">Empty Page</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/faq-1.html" target="_blank">FAQ</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/search.html" target="_blank">Search Result</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-3">
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-1.html" target="_blank">Contact Layout 1</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-2.html" target="_blank">Contact Layout 2</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-3.html" target="_blank">Contact Layout 3</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-4.html" target="_blank">Contact Layout 4</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-5.html" target="_blank">Contact Layout 5</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-6.html" target="_blank">Contact Layout 6</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/contact-7.html" target="_blank">Contact Layout 7</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/subscribe-newsletter.html" target="_blank">Subscribe Newsletter</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/under-maintenance.html" target="_blank">Under Maintenance</a></li>
                  </ul>
                </div>
              </div>
            </li>
            <li><a href="index-minimal.html#">Portfolio</a>
              <div class="megamenu-panel">
                <div class="megamenu-lists">
                  <ul class="megamenu-list list-col-5">
                    <li class="megamenu-list-title"><a href="index-minimal.html#">Masonary</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-masonary-2-column.html" target="_blank">2 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-masonary-3-column.html" target="_blank">3 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-masonary-4-column.html" target="_blank">4 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-masonary-6-column.html" target="_blank">6 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-masonary-full-width.html" target="_blank">Full Width</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-5">
                    <li class="megamenu-list-title"><a href="index-minimal.html#">Masonary No Gutter</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-masonary-2-column-no-gutter.html" target="_blank">2 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-masonary-3-column-no-gutter.html" target="_blank">3 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-masonary-4-column-no-gutter.html" target="_blank">4 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-masonary-6-column-no-gutter.html" target="_blank">6 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-masonary-full-width-no-gutter.html" target="_blank">Full Width</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-5">
                    <li class="megamenu-list-title"><a href="index-minimal.html#">Grid</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-grid-2-column.html" target="_blank">2 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-grid-3-column.html" target="_blank">3 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-grid-4-column.html" target="_blank">4 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-grid-6-column.html" target="_blank">6 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-grid-full-width.html" target="_blank">Full Width</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-5">
                    <li class="megamenu-list-title"><a href="index-minimal.html#">Grid No Gutter</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-grid-2-column-no-gutter.html" target="_blank">2 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-grid-3-column-no-gutter.html" target="_blank">3 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-grid-4-column-no-gutter.html" target="_blank">4 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-grid-6-column-no-gutter.html" target="_blank">6 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-grid-full-width-no-gutter.html" target="_blank">Full Width</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-5">
                    <li class="megamenu-list-title"><a href="index-minimal.html#">Portfolio Details</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-details-embed-video.html" target="_blank">Embed Video</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-details-masonary-thumb.html" target="_blank">Masonary Thumb</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-details-single-thumb.html" target="_blank">Single Thumb</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-details-slider-gallery.html" target="_blank">Slider Gallery</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-details-youtube-video.html" target="_blank">YouTube Video</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/portfolio-details-vimeo-video.html" target="_blank">Vimeo Video</a></li>
                  </ul>
                </div>
              </div>
            </li>
            <li><a href="index-minimal.html#">Blog</a>
              <div class="megamenu-panel">
                <div class="megamenu-lists">
                  <ul class="megamenu-list list-col-4">
                    <li class="megamenu-list-title"><a href="index-minimal.html#">Masonary Layout</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/blog-masonary-2c.html" target="_blank">2 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/blog-masonary-3c.html" target="_blank">3 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/blog-masonary-4c.html" target="_blank">4 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/blog-masonary-6c.html" target="_blank">6 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/blog-masonary-full-width.html" target="_blank">Full Width</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-4">
                    <li class="megamenu-list-title"><a href="index-minimal.html#">Grid Layout</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/blog-grid-2c.html" target="_blank">2 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/blog-grid-3c.html" target="_blank">3 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/blog-grid-4c.html" target="_blank">4 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/blog-grid-6c.html" target="_blank">6 Column</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/blog-grid-full-width.html" target="_blank">Full Width</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-4">
                    <li class="megamenu-list-title"><a href="index-minimal.html#">Sidebar Layout</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/blog-grid-with-left-sb.html" target="_blank">Left Sidebar Grid</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/blog-masonary-with-left-sidebar.html" target="_blank">Left Sidebar Masonary</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/blog-grid-with-right-sb.html" target="_blank">Right Sidebar Grid</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/blog-masonary-with-right-sidebar.html" target="_blank">Right Sidebar Masonary</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/blog-without-sidebar.html" target="_blank">No Sidebar</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/blog-with-left-right-sidebar.html" target="_blank">Both Side Sidebar</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-4">
                    <li class="megamenu-list-title"><a href="index-minimal.html#">Blog Details</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/single-blog-1.html" target="_blank">Single Blog Layout 1</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/single-blog-2.html" target="_blank">Single Blog Layout 2</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/single-blog-3.html" target="_blank">Single Blog Layout 3</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/single-blog-4.html" target="_blank">Single Blog Layout 4</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/single-blog-5.html" target="_blank">Single Blog Layout 5</a></li>
                    <li><a href="http://demo.designing-world.com/classy-baao/classy-multipage/single-blog-6.html" target="_blank">Single Blog Layout 6</a></li>
                  </ul>
                </div>
              </div>
            </li>
            <li><a href="../classy-shortcodes/index.html" target="_blank">Shortcodes <span class="label label-pill label-primary">New</span></a></li>
            <li><a href="../classy-onepage/all-demo-pages.html" target="_blank">One Page</a></li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</header>
              
            
!

CSS

              
                #preloader{overflow:hidden;background-color:#fff;height:100%;left:0;position:fixed;top:0;width:100%;z-index:999999;}
.classy-load{-webkit-animation:2000ms linear 0s normal none infinite running classy-load;animation:2000ms linear 0s normal none infinite running classy-load;background:transparent none repeat scroll 0 0;border-color:#dddddd #dddddd #111111;border-radius:50%;border-style:solid;border-width:2px;height:40px;left:calc(50% - 20px);position:relative;top:calc(50% - 20px);width:40px;z-index:9;}
@-webkit-keyframes classy-load{
    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes classy-load{
    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}

.navigation{width:100%;height:70px;display:table;position:relative;font-family:inherit;background-color:#fff}
.navigation *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.navigation-portrait{height:48px}
.navigation-fixed{position:fixed;top:0;left:0;z-index:19998}
.navigation-hidden{width:0!important;height:0!important;margin:0!important;padding:0!important}
.align-to-right{float:right}
.nav-header{float:left}
.navigation-hidden .nav-header{display:none}
.nav-brand{line-height:70px;padding:0;color:#343a40;font-size:24px;text-decoration:none!important}
.nav-brand:hover,.nav-brand:focus{color:#343a40}
.navigation-portrait .nav-brand{font-size:18px;line-height:48px}
.nav-logo>img{height:48px;margin:11px auto;padding:0 15px;float:left}
.nav-logo:focus>img{outline:initial}
.navigation-portrait .nav-logo>img{height:36px;margin:6px auto 6px 15px;padding:0}
.nav-toggle{width:30px;height:30px;padding:6px 2px 0;position:absolute;top:50%;margin-top:-14px;right:15px;display:none;cursor:pointer}
.nav-toggle:before{content:"";position:absolute;width:24px;height:2px;background-color:#343a40;border-radius:10px;box-shadow:0 .5em 0 0 #343a40,0 1em 0 0 #343a40}
.navigation-portrait .nav-toggle{display:block}
.navigation-portrait .nav-menus-wrapper{width:320px;height:100%;top:0;left:-400px;position:fixed;background-color:#fff;z-index:20000;overflow-y:auto;-webkit-overflow-scrolling:touch;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:ease;transition-timing-function:ease}
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-right{left:auto;right:-400px}
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open{left:0}
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-right.nav-menus-wrapper-open{left:auto;right:0}
.nav-menus-wrapper-close-button{width:30px;height:40px;margin:10px 7px;display:none;float:right;color:#343a40;font-size:26px;cursor:pointer}
.navigation-portrait .nav-menus-wrapper-close-button{display:block}
.nav-menu{margin:0;padding:0;list-style:none;line-height:normal;font-size:0}
.navigation-portrait .nav-menu{width:100%}
.navigation-landscape .nav-menu.nav-menu-centered{float:none;text-align:center}
.navigation-landscape .nav-menu.nav-menu-centered>li{float:none}
.nav-menu>li{display:inline-block;float:left;text-align:left}
.navigation-portrait .nav-menu>li{width:100%;position:relative;border-top:solid 1px #f0f0f0}
.navigation-portrait .nav-menu>li:last-child{border-bottom:solid 1px #f0f0f0}
.nav-menu+.nav-menu>li:first-child{border-top:none}
.nav-menu>li>a{height:70px;padding:26px 15px;display:inline-block;text-decoration:none;font-size:14px;color:#343a40;-webkit-transition:color .3s,background .3s;transition:color .3s,background .3s}
.navigation-portrait .nav-menu>li>a{width:100%;height:auto;padding:12px 15px 12px 26px}
.nav-menu>li:hover>a,.nav-menu>li.active>a,.nav-menu>li.focus>a{color:#27ae60}
.nav-menu>li>a>i,.nav-menu>li>a>[class*=ion-]{width:18px;height:16px;line-height:16px;-webkit-transform:scale(1.4);transform:scale(1.4)}
.nav-menu>li>a>[class*=ion-]{width:16px;display:inline-block;-webkit-transform:scale(1.8);transform:scale(1.8)}
.navigation-portrait .nav-menu.nav-menu-social{width:100%;text-align:center}
.nav-menu.nav-menu-social>li{text-align:center;float:none;border:none!important}
.navigation-portrait .nav-menu.nav-menu-social>li{width:auto}
.nav-menu.nav-menu-social>li>a>[class*=ion-]{font-size:12px}
.nav-menu.nav-menu-social>li>a>.fa{font-size:14px}
.navigation-portrait .nav-menu.nav-menu-social>li>a{padding:15px}
.submenu-indicator{margin-left:6px;margin-top:6px;float:right;-webkit-transition:all .2s;transition:all .2s}
.navigation-portrait .submenu-indicator{width:54px;height:44px;margin-top:0;position:absolute;top:0;right:0;text-align:center;z-index:20000}
.submenu-indicator-chevron{height:6px;width:6px;display:block;border-style:solid;border-width:0 1px 1px 0;border-color:transparent #70798b #70798b transparent;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:border .2s;transition:border .2s}
.navigation-portrait .submenu-indicator-chevron{position:absolute;top:18px;left:24px}
.nav-menu>li:hover>a .submenu-indicator-chevron,.nav-menu>.active>a .submenu-indicator-chevron,.nav-menu>.focus>a .submenu-indicator-chevron{border-color:transparent #967adc #967adc transparent}
.navigation-portrait .submenu-indicator.submenu-indicator-up{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}
.nav-overlay-panel{width:100%;height:100%;top:0;left:0;position:fixed;display:none;z-index:19999}
.no-scroll{width:100%;height:100%;overflow:hidden}
.nav-search{height:70px;float:right;z-index:19998}
.navigation-portrait .nav-search{height:48px;padding:0 10px;margin-right:52px}
.navigation-hidden .nav-search{display:none}
.nav-search-button{width:70px;height:70px;line-height:70px;text-align:center;cursor:pointer;background-color:#fbfcfd}
.navigation-portrait .nav-search-button{width:50px;height:48px;line-height:46px;font-size:22px}
.nav-search-icon{width:14px;height:14px;margin:2px 8px 8px 4px;display:inline-block;vertical-align:middle;position:relative;color:#343a40;text-align:left;text-indent:-9999px;border:2px solid;border-radius:50%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.nav-search-icon:after,.nav-search-icon:before{content:'';pointer-events:none}
.nav-search-icon:before{width:2px;height:11px;top:11px;position:absolute;left:50%;border-radius:0 0 1px 1px;box-shadow:inset 0 0 0 32px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.nav-search-button:hover .nav-search-icon{color:#27ae60}
.nav-search>form{width:100%;height:100%;padding:0 auto;display:none;position:absolute;left:0;top:0;background-color:#fff;z-index:99}
.nav-search-inner{width:70%;height:70px;margin:auto;display:table}
.navigation-portrait .nav-search-inner{height:48px}
.nav-search-inner input[type=text],.nav-search-inner input[type=search]{height:70px;width:100%;margin:0;padding:0 12px;font-size:26px;text-align:center;color:#343a40;outline:none;line-height:70px;border:none;background-color:transparent;-webkit-transition:all .3s;transition:all .3s}
.navigation-portrait .nav-search-inner input[type=text],.navigation-portrait .nav-search-inner input[type=search]{height:48px;font-size:18px;line-height:48px}
.nav-search-close-button{width:28px;height:28px;display:block;position:absolute;right:20px;top:20px;line-height:normal;color:#343a40;font-size:20px;cursor:pointer;text-align:center}
.navigation-portrait .nav-search-close-button{top:10px;right:14px}
.nav-button{margin:18px 15px 0;padding:8px 14px;display:inline-block;color:#fff;font-size:14px;text-align:center;text-decoration:none;border-radius:4px}
.nav-button:hover,.nav-button:focus{color:#fff;text-decoration:none}
.navigation-portrait .nav-button{width:calc(100% - 52px);margin:17px 26px}
.nav-text{margin:25px 15px;display:inline-block;color:#343a40;font-size:14px}
.navigation-portrait .nav-text{width:calc(100% - 52px);margin:12px 26px 0}
.navigation-portrait .nav-text+ul{margin-top:15px}
.nav-dropdown{min-width:180px;margin:0;padding:0;display:none;position:absolute;list-style:none;z-index:98;white-space:nowrap}
.navigation-portrait .nav-dropdown{width:100%;position:static;left:0}
.nav-dropdown .nav-dropdown{left:100%}
.nav-menu>li>.nav-dropdown{border-top:solid 1px #f0f0f0}
.nav-dropdown>li{width:100%;float:left;clear:both;position:relative;text-align:left}
.nav-dropdown>li>a{width:100%;padding:16px 20px;display:inline-block;text-decoration:none;float:left;font-size:13px;color:#343a40;background-color:#fdfdfd;}
.nav-dropdown>li:hover>a,.nav-dropdown>li.focus>a{color:#27ae60}
.nav-dropdown.nav-dropdown-left{right:0}
.nav-dropdown>li>.nav-dropdown-left{left:auto;right:100%}
.navigation-landscape .nav-dropdown.nav-dropdown-left>li>a{text-align:right}
.navigation-portrait .nav-dropdown>li>a{padding:12px 20px 12px 30px}
.navigation-portrait .nav-dropdown>li>ul>li>a{padding-left:50px}
.navigation-portrait .nav-dropdown>li>ul>li>ul>li>a{padding-left:70px}
.navigation-portrait .nav-dropdown>li>ul>li>ul>li>ul>li>a{padding-left:90px}
.navigation-portrait .nav-dropdown>li>ul>li>ul>li>ul>li>ul>li>a{padding-left:110px}
.nav-dropdown .submenu-indicator{right:15px;top:10px;position:absolute}
.navigation-portrait .nav-dropdown .submenu-indicator{right:0;top:0}
.nav-dropdown .submenu-indicator .submenu-indicator-chevron{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.navigation-portrait .nav-dropdown .submenu-indicator .submenu-indicator-chevron{-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.nav-dropdown>li:hover>a .submenu-indicator-chevron,.nav-dropdown>.focus>a .submenu-indicator-chevron{border-color:transparent #27ae60 #27ae60 transparent}
.navigation-landscape .nav-dropdown.nav-dropdown-left .submenu-indicator{left:10px}
.navigation-landscape .nav-dropdown.nav-dropdown-left .submenu-indicator .submenu-indicator-chevron{-webkit-transform:rotate(135deg);transform:rotate(135deg)}
.nav-dropdown-horizontal{width:100%;left:0;background-color:#fdfdfd;border-top:solid 1px #f0f0f0}
.nav-dropdown-horizontal .nav-dropdown-horizontal{width:100%;top:100%;left:0}
.navigation-portrait .nav-dropdown-horizontal .nav-dropdown-horizontal{border-top:none}
.nav-dropdown-horizontal>li{width:auto;clear:none;position:static}
.navigation-portrait .nav-dropdown-horizontal>li{width:100%}
.nav-dropdown-horizontal>li>a{position:relative}
.nav-dropdown-horizontal .submenu-indicator{height:18px;top:11px;-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.navigation-portrait .nav-dropdown-horizontal .submenu-indicator{height:42px;top:0;-webkit-transform:rotate(0deg);transform:rotate(0deg)}
.navigation-portrait .nav-dropdown-horizontal .submenu-indicator.submenu-indicator-up{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}
.megamenu-panel{width:100%;padding:15px;display:none;position:absolute;font-size:14px;z-index:98;text-align:left;color:inherit;border-top:solid 1px #f0f0f0;background-color:#fdfdfd;box-shadow:0 10px 20px rgba(0,0,0,.075)}
.navigation-portrait .megamenu-panel{padding:25px;position:static;display:block}
.megamenu-panel [class*=container]{width:100%}
.megamenu-panel [class*="container"] [class*="col-"]{padding:0}
.megamenu-panel-half{width:50%}
.megamenu-panel-quarter{width:25%}
.navigation-portrait .megamenu-panel-half,.navigation-portrait .megamenu-panel-quarter{width:100%}
.megamenu-panel-row{width:100%}
.megamenu-panel-row:before,.megamenu-panel-row:after{display:table;content:"";line-height:0}
.megamenu-panel-row:after{clear:both}
.megamenu-panel-row [class*=col-]{display:block;min-height:20px;float:left;margin-left:3%}
.megamenu-panel-row [class*=col-]:first-child{margin-left:0}
.navigation-portrait .megamenu-panel-row [class*=col-]{float:none;display:block;width:100%!important;margin-left:0;margin-top:15px}
.navigation-portrait .megamenu-panel-row:first-child [class*=col-]:first-child{margin-top:0}
.megamenu-panel-row .col-1{width:5.583333333333%}
.megamenu-panel-row .col-2{width:14.166666666666%}
.megamenu-panel-row .col-3{width:22.75%}
.megamenu-panel-row .col-4{width:31.333333333333%}
.megamenu-panel-row .col-5{width:39.916666666667%}
.megamenu-panel-row .col-6{width:48.5%}
.megamenu-panel-row .col-7{width:57.083333333333%}
.megamenu-panel-row .col-8{width:65.666666666667%}
.megamenu-panel-row .col-9{width:74.25%}
.megamenu-panel-row .col-10{width:82.833333333334%}
.megamenu-panel-row .col-11{width:91.416666666667%}
.megamenu-panel-row .col-12{width:100%}
.megamenu-tabs{width:100%;float:left;display:block}
.megamenu-tabs-nav{width:20%;margin:0;padding:0;float:left;list-style:none}
.navigation-portrait .megamenu-tabs-nav{width:100%}
.megamenu-tabs-nav>li>a{width:100%;padding:10px 16px;float:left;font-size:13px;text-decoration:none;color:#343a40;border:solid 1px #eff0f2;outline:0;background-color:#fff}
.megamenu-tabs-nav>li.active a,.megamenu-tabs-nav>li:hover a{background-color:#f5f5f5}
.megamenu-tabs-pane{width:80%;min-height:30px;padding:20px;float:right;display:none;font-size:13px;color:#343a40;border:solid 1px #eff0f2;background-color:#fff}
.megamenu-tabs-pane.active{display:block}
.navigation-portrait .megamenu-tabs-pane{width:100%}
.megamenu-lists{width:100%;display:table}
.megamenu-list{width:100%;margin:0 0 15px;padding:0;display:inline-block;float:left;list-style:none}
.megamenu-list:last-child{margin:0;border:none}
.navigation-landscape .megamenu-list{margin:-15px 0;padding:20px 0;border-right:solid 1px #f0f0f0}
.navigation-landscape .megamenu-list:last-child{border:none}
.megamenu-list>li>a{width:100%;padding:10px 15px;display:inline-block;color:#343a40;text-decoration:none;font-size:13px;}
.megamenu-list>li>a:hover{background-color:#27ae60;color:#fff}
.megamenu-list>li.megamenu-list-title>a{font-size:12px;font-weight:600;text-transform:uppercase;color:#343a40}
.megamenu-list>li.megamenu-list-title>a:hover{background-color:transparent}
.navigation-landscape .list-col-2{width:50%}
.navigation-landscape .list-col-3{width:33%}
.navigation-landscape .list-col-4{width:25%}
.navigation-landscape .list-col-5{width:20%}
.nav-menu > li > a{color:#343a40;text-transform:uppercase;}
.nav-dropdown > li > a{color:#343a40;padding:10px 20px;border-bottom:1px solid #f6f6f6;}
.nav-dropdown > li > a:hover,.nav-dropdown > li > a:focus{color:#27ae60;}
.main_header_area.sticky{width:100%;position:fixed;top:0;left:0;background-color:#fff;z-index:9999;box-shadow:0 5px 30px rgba(0,0,0,0.1);}
.transparent-menu{position:absolute;width:100%;left:0;top:0;z-index:99;}
.navigation-portrait .nav-menu > li > a{width:100%;height:auto;padding:10px 10px 10px 30px;}
@media only screen and (min-width:320px) and (max-width:767px){
  .nav-dropdown > li > a,.megamenu-list > li > a{width:65%}
}

              
            
!

JS

              
                !(function(n, i, e, a) {
  (n.navigation = function(t, s) {
    var o = {
        responsive: !0,
        mobileBreakpoint: 991,
        showDuration: 200,
        hideDuration: 200,
        showDelayDuration: 0,
        hideDelayDuration: 0,
        submenuTrigger: "hover",
        effect: "fade",
        submenuIndicator: !0,
        submenuIndicatorTrigger: !1,
        hideSubWhenGoOut: !0,
        visibleSubmenusOnMobile: !1,
        fixed: !1,
        overlay: !0,
        overlayColor: "rgba(0, 0, 0, 0.5)",
        hidden: !1,
        hiddenOnMobile: !1,
        offCanvasSide: "left",
        offCanvasCloseButton: !0,
        animationOnShow: "",
        animationOnHide: "",
        onInit: function() {},
        onLandscape: function() {},
        onPortrait: function() {},
        onShowOffCanvas: function() {},
        onHideOffCanvas: function() {}
      },
      r = this,
      u = Number.MAX_VALUE,
      d = 1,
      l = "click.nav touchstart.nav",
      f = "mouseenter focusin",
      c = "mouseleave focusout";
    r.settings = {};
    var t = (n(t), t);
    n(t).find(".nav-search").length > 0 &&
      n(t)
        .find(".nav-search")
        .find("form")
        .prepend(
          "<span class='nav-search-close-button' tabindex='0'>&#10005;</span>"
        ),
      (r.init = function() {
        (r.settings = n.extend({}, o, s)),
          r.settings.offCanvasCloseButton &&
            n(t)
              .find(".nav-menus-wrapper")
              .prepend(
                "<span class='nav-menus-wrapper-close-button'>&#10005;</span>"
              ),
          "right" == r.settings.offCanvasSide &&
            n(t)
              .find(".nav-menus-wrapper")
              .addClass("nav-menus-wrapper-right"),
          r.settings.hidden &&
            (n(t).addClass("navigation-hidden"),
            (r.settings.mobileBreakpoint = 99999)),
          v(),
          r.settings.fixed && n(t).addClass("navigation-fixed"),
          n(t)
            .find(".nav-toggle")
            .on("click touchstart", function(n) {
              n.stopPropagation(),
                n.preventDefault(),
                r.showOffcanvas(),
                s !== a && r.callback("onShowOffCanvas");
            }),
          n(t)
            .find(".nav-menus-wrapper-close-button")
            .on("click touchstart", function() {
              r.hideOffcanvas(), s !== a && r.callback("onHideOffCanvas");
            }),
          n(t)
            .find(".nav-search-button, .nav-search-close-button")
            .on("click touchstart keydown", function(i) {
              i.stopPropagation(), i.preventDefault();
              var e = i.keyCode || i.which;
              "click" === i.type ||
              "touchstart" === i.type ||
              ("keydown" === i.type && 13 == e)
                ? r.toggleSearch()
                : 9 == e && n(i.target).blur();
            }),
          n(t).find(".megamenu-tabs").length > 0 && y(),
          n(i).resize(function() {
            r.initNavigationMode(C()), O(), r.settings.hiddenOnMobile && m();
          }),
          r.initNavigationMode(C()),
          r.settings.hiddenOnMobile && m(),
          s !== a && r.callback("onInit");
      });
    var h = function() {
        n(t)
          .find(".nav-submenu")
          .hide(0),
          n(t)
            .find("li")
            .removeClass("focus");
      },
      v = function() {
        n(t)
          .find("li")
          .each(function() {
            n(this).children(".nav-dropdown,.megamenu-panel").length > 0 &&
              (n(this)
                .children(".nav-dropdown,.megamenu-panel")
                .addClass("nav-submenu"),
              r.settings.submenuIndicator &&
                n(this)
                  .children("a")
                  .append(
                    "<span class='submenu-indicator'><span class='submenu-indicator-chevron'></span></span>"
                  ));
          });
      },
      m = function() {
        n(t).hasClass("navigation-portrait")
          ? n(t).addClass("navigation-hidden")
          : n(t).removeClass("navigation-hidden");
      };
    (r.showSubmenu = function(i, e) {
      C() > r.settings.mobileBreakpoint &&
        n(t)
          .find(".nav-search")
          .find("form")
          .fadeOut(),
        "fade" == e
          ? n(i)
              .children(".nav-submenu")
              .stop(!0, !0)
              .delay(r.settings.showDelayDuration)
              .fadeIn(r.settings.showDuration)
              .removeClass(r.settings.animationOnHide)
              .addClass(r.settings.animationOnShow)
          : n(i)
              .children(".nav-submenu")
              .stop(!0, !0)
              .delay(r.settings.showDelayDuration)
              .slideDown(r.settings.showDuration)
              .removeClass(r.settings.animationOnHide)
              .addClass(r.settings.animationOnShow),
        n(i).addClass("focus");
    }),
      (r.hideSubmenu = function(i, e) {
        "fade" == e
          ? n(i)
              .find(".nav-submenu")
              .stop(!0, !0)
              .delay(r.settings.hideDelayDuration)
              .fadeOut(r.settings.hideDuration)
              .removeClass(r.settings.animationOnShow)
              .addClass(r.settings.animationOnHide)
          : n(i)
              .find(".nav-submenu")
              .stop(!0, !0)
              .delay(r.settings.hideDelayDuration)
              .slideUp(r.settings.hideDuration)
              .removeClass(r.settings.animationOnShow)
              .addClass(r.settings.animationOnHide),
          n(i)
            .removeClass("focus")
            .find(".focus")
            .removeClass("focus");
      });
    var p = function() {
        n("body").addClass("no-scroll"),
          r.settings.overlay &&
            (n(t).append("<div class='nav-overlay-panel'></div>"),
            n(t)
              .find(".nav-overlay-panel")
              .css("background-color", r.settings.overlayColor)
              .fadeIn(300)
              .on("click touchstart", function(n) {
                r.hideOffcanvas();
              }));
      },
      g = function() {
        n("body").removeClass("no-scroll"),
          r.settings.overlay &&
            n(t)
              .find(".nav-overlay-panel")
              .fadeOut(400, function() {
                n(this).remove();
              });
      };
    (r.showOffcanvas = function() {
      p(),
        "left" == r.settings.offCanvasSide
          ? n(t)
              .find(".nav-menus-wrapper")
              .css("transition-property", "left")
              .addClass("nav-menus-wrapper-open")
          : n(t)
              .find(".nav-menus-wrapper")
              .css("transition-property", "right")
              .addClass("nav-menus-wrapper-open");
    }),
      (r.hideOffcanvas = function() {
        n(t)
          .find(".nav-menus-wrapper")
          .removeClass("nav-menus-wrapper-open")
          .on(
            "webkitTransitionEnd moztransitionend transitionend oTransitionEnd",
            function() {
              n(t)
                .find(".nav-menus-wrapper")
                .css("transition-property", "none")
                .off();
            }
          ),
          g();
      }),
      (r.toggleOffcanvas = function() {
        C() <= r.settings.mobileBreakpoint &&
          (n(t)
            .find(".nav-menus-wrapper")
            .hasClass("nav-menus-wrapper-open")
            ? (r.hideOffcanvas(), s !== a && r.callback("onHideOffCanvas"))
            : (r.showOffcanvas(), s !== a && r.callback("onShowOffCanvas")));
      }),
      (r.toggleSearch = function() {
        "none" ==
        n(t)
          .find(".nav-search")
          .find("form")
          .css("display")
          ? (n(t)
              .find(".nav-search")
              .find("form")
              .fadeIn(200),
            n(t)
              .find(".nav-search")
              .find("input")
              .focus())
          : (n(t)
              .find(".nav-search")
              .find("form")
              .fadeOut(200),
            n(t)
              .find(".nav-search")
              .find("input")
              .blur());
      }),
      (r.initNavigationMode = function(i) {
        r.settings.responsive
          ? (i <= r.settings.mobileBreakpoint &&
              u > r.settings.mobileBreakpoint &&
              (n(t)
                .addClass("navigation-portrait")
                .removeClass("navigation-landscape"),
              S(),
              s !== a && r.callback("onPortrait")),
            i > r.settings.mobileBreakpoint &&
              d <= r.settings.mobileBreakpoint &&
              (n(t)
                .addClass("navigation-landscape")
                .removeClass("navigation-portrait"),
              k(),
              g(),
              r.hideOffcanvas(),
              s !== a && r.callback("onLandscape")),
            (u = i),
            (d = i))
          : (n(t).addClass("navigation-landscape"),
            k(),
            s !== a && r.callback("onLandscape"));
      });
    var b = function() {
        n("html").on("click.body touchstart.body", function(i) {
          0 === n(i.target).closest(".navigation").length &&
            (n(t)
              .find(".nav-submenu")
              .fadeOut(),
            n(t)
              .find(".focus")
              .removeClass("focus"),
            n(t)
              .find(".nav-search")
              .find("form")
              .fadeOut());
        });
      },
      C = function() {
        return (
          i.innerWidth || e.documentElement.clientWidth || e.body.clientWidth
        );
      },
      w = function() {
        n(t)
          .find(".nav-menu")
          .find("li, a")
          .off(l)
          .off(f)
          .off(c);
      },
      O = function() {
        if (C() > r.settings.mobileBreakpoint) {
          var i = n(t).outerWidth(!0);
          n(t)
            .find(".nav-menu")
            .children("li")
            .children(".nav-submenu")
            .each(function() {
              n(this)
                .parent()
                .position().left +
                n(this).outerWidth() >
              i
                ? n(this).css("right", 0)
                : n(this).css("right", "auto");
            });
        }
      },
      y = function() {
        function i(i) {
          var e = n(i)
              .children(".megamenu-tabs-nav")
              .children("li"),
            a = n(i).children(".megamenu-tabs-pane");
          n(e).on("click.tabs touchstart.tabs", function(i) {
            i.stopPropagation(),
              i.preventDefault(),
              n(e).removeClass("active"),
              n(this).addClass("active"),
              n(a)
                .hide(0)
                .removeClass("active"),
              n(a[n(this).index()])
                .show(0)
                .addClass("active");
          });
        }
        if (n(t).find(".megamenu-tabs").length > 0)
          for (var e = n(t).find(".megamenu-tabs"), a = 0; a < e.length; a++)
            i(e[a]);
      },
      k = function() {
        w(),
          h(),
          navigator.userAgent.match(/Mobi/i) ||
          navigator.maxTouchPoints > 0 ||
          "click" == r.settings.submenuTrigger
            ? n(t)
                .find(".nav-menu, .nav-dropdown")
                .children("li")
                .children("a")
                .on(l, function(e) {
                  if (
                    (r.hideSubmenu(
                      n(this)
                        .parent("li")
                        .siblings("li"),
                      r.settings.effect
                    ),
                    n(this)
                      .closest(".nav-menu")
                      .siblings(".nav-menu")
                      .find(".nav-submenu")
                      .fadeOut(r.settings.hideDuration),
                    n(this).siblings(".nav-submenu").length > 0)
                  ) {
                    if (
                      (e.stopPropagation(),
                      e.preventDefault(),
                      "none" ==
                        n(this)
                          .siblings(".nav-submenu")
                          .css("display"))
                    )
                      return (
                        r.showSubmenu(n(this).parent("li"), r.settings.effect),
                        O(),
                        !1
                      );
                    if (
                      (r.hideSubmenu(n(this).parent("li"), r.settings.effect),
                      "_blank" === n(this).attr("target") ||
                        "blank" === n(this).attr("target"))
                    )
                      i.open(n(this).attr("href"));
                    else {
                      if (
                        "#" === n(this).attr("href") ||
                        "" === n(this).attr("href") ||
                        "javascript:void(0)" === n(this).attr("href")
                      )
                        return !1;
                      i.location.href = n(this).attr("href");
                    }
                  }
                })
            : n(t)
                .find(".nav-menu")
                .find("li")
                .on(f, function() {
                  r.showSubmenu(this, r.settings.effect), O();
                })
                .on(c, function() {
                  r.hideSubmenu(this, r.settings.effect);
                }),
          r.settings.hideSubWhenGoOut && b();
      },
      S = function() {
        w(),
          h(),
          r.settings.visibleSubmenusOnMobile
            ? n(t)
                .find(".nav-submenu")
                .show(0)
            : (n(t)
                .find(".submenu-indicator")
                .removeClass("submenu-indicator-up"),
              r.settings.submenuIndicator && r.settings.submenuIndicatorTrigger
                ? n(t)
                    .find(".submenu-indicator")
                    .on(l, function(i) {
                      return (
                        i.stopPropagation(),
                        i.preventDefault(),
                        r.hideSubmenu(
                          n(this)
                            .parent("a")
                            .parent("li")
                            .siblings("li"),
                          "slide"
                        ),
                        r.hideSubmenu(
                          n(this)
                            .closest(".nav-menu")
                            .siblings(".nav-menu")
                            .children("li"),
                          "slide"
                        ),
                        "none" ==
                        n(this)
                          .parent("a")
                          .siblings(".nav-submenu")
                          .css("display")
                          ? (n(this).addClass("submenu-indicator-up"),
                            n(this)
                              .parent("a")
                              .parent("li")
                              .siblings("li")
                              .find(".submenu-indicator")
                              .removeClass("submenu-indicator-up"),
                            n(this)
                              .closest(".nav-menu")
                              .siblings(".nav-menu")
                              .find(".submenu-indicator")
                              .removeClass("submenu-indicator-up"),
                            r.showSubmenu(
                              n(this)
                                .parent("a")
                                .parent("li"),
                              "slide"
                            ),
                            !1)
                          : (n(this)
                              .parent("a")
                              .parent("li")
                              .find(".submenu-indicator")
                              .removeClass("submenu-indicator-up"),
                            void r.hideSubmenu(
                              n(this)
                                .parent("a")
                                .parent("li"),
                              "slide"
                            ))
                      );
                    })
                : n(t)
                    .find(".nav-menu, .nav-dropdown")
                    .children("li")
                    .children("a")
                    .on(l, function(e) {
                      if (
                        (e.stopPropagation(),
                        e.preventDefault(),
                        r.hideSubmenu(
                          n(this)
                            .parent("li")
                            .siblings("li"),
                          r.settings.effect
                        ),
                        r.hideSubmenu(
                          n(this)
                            .closest(".nav-menu")
                            .siblings(".nav-menu")
                            .children("li"),
                          "slide"
                        ),
                        "none" ==
                          n(this)
                            .siblings(".nav-submenu")
                            .css("display"))
                      )
                        return (
                          n(this)
                            .children(".submenu-indicator")
                            .addClass("submenu-indicator-up"),
                          n(this)
                            .parent("li")
                            .siblings("li")
                            .find(".submenu-indicator")
                            .removeClass("submenu-indicator-up"),
                          n(this)
                            .closest(".nav-menu")
                            .siblings(".nav-menu")
                            .find(".submenu-indicator")
                            .removeClass("submenu-indicator-up"),
                          r.showSubmenu(n(this).parent("li"), "slide"),
                          !1
                        );
                      if (
                        (n(this)
                          .parent("li")
                          .find(".submenu-indicator")
                          .removeClass("submenu-indicator-up"),
                        r.hideSubmenu(n(this).parent("li"), "slide"),
                        "_blank" === n(this).attr("target") ||
                          "blank" === n(this).attr("target"))
                      )
                        i.open(n(this).attr("href"));
                      else {
                        if (
                          "#" === n(this).attr("href") ||
                          "" === n(this).attr("href") ||
                          "javascript:void(0)" === n(this).attr("href")
                        )
                          return !1;
                        i.location.href = n(this).attr("href");
                      }
                    }));
      };
    (r.callback = function(n) {
      s[n] !== a && s[n].call(t);
    }),
      r.init();
  }),
    (n.fn.navigation = function(i) {
      return this.each(function() {
        if (a === n(this).data("navigation")) {
          var e = new n.navigation(this, i);
          n(this).data("navigation", e);
        }
      });
    });
})(jQuery, window, document);



(function ($) {
    'use strict';

    var $window = $(window);

    if ($.fn.navigation) {
        $("#navigation1").navigation();
        $("#always-hidden-nav").navigation({
            hidden: true
        });
    }

            $window.on('load', function () {
        $('#preloader').fadeOut('slow', function () {
            $(this).remove();
        });
    });

})(jQuery);
              
            
!
999px

Console