<header id="page-header" class="bp-page-header navbar navbar-has-image navbar-top header-layout-large">
<div class="header-section header-section-top">
<div class="container">
<a href="#" class="navbar-brand navbar-brand-image" title="">
<img class="navbar-brand-logo-normal" src="holder.js/150x75?auto=yes&text=Logo&theme=vine" alt="Fractal" height="" width="" />
</a>
<div class="navbar-search">
<div class="search">
<form name="search" class="search__form form-inline" action="#">
<label class="search__label" for="input804">
<svg class="search__icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-search"></use>
</svg>
</label>
<input class="search__control form-control" id="input804" />
<button class="search__submit" type="submit" name="search" value="">
<svg class="search__submit__icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
</form>
</div>
</div>
<div class="navbar-language">
<ul id="language_menu" class="language-menu">
<li class="active">
<a href="#" title="English">
<span>English</span>
</a>
</li>
<li>
<a href="#" title="German">
<span>German</span>
</a>
</li>
<li class="text-muted">
<span>French (not available)</span>
</li>
</ul>
</div>
<div class="navbar-mmenu">
<m-burger menu="mmenu" fx="collapse">
Menu
</m-burger>
<nav id="mmenu">
<ul class="mmenu">
<li class="active">
<a href="#" title="Home">
<span>Home</span>
</a>
</li>
<li>
<a href="#" title="Customizings">
<span>Customizings</span>
</a>
</li>
<li>
<a href="#" title="Features">
<span>Features</span>
</a>
</li>
<li>
<a href="#" title="Pages">
<span>Pages</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Default">
<span>Default</span>
</a>
</li>
<li>
<a href="#" title="2 Columns">
<span>2 Columns</span>
</a>
</li>
<li>
<a href="#" title="2 Columns 25/75">
<span>2 Columns 25/75</span>
</a>
</li>
<li>
<a href="#" title="2 Columns 50/50">
<span>2 Columns 50/50</span>
</a>
</li>
<li>
<a href="#" title="2 Columns, Offset Right">
<span>2 Columns, Offset Right</span>
</a>
</li>
<li>
<a href="#" title="3 Columns">
<span>3 Columns</span>
</a>
</li>
<li>
<a href="#" title="Simple">
<span>Simple</span>
</a>
</li>
<li>
<a href="#" title="Subnavigation, Left">
<span>Subnavigation, Left</span>
</a>
</li>
<li>
<a href="#" title="Subnavigation, Left and 2 Columns">
<span>Subnavigation, Left and 2 Columns</span>
</a>
</li>
<li>
<a href="#" title="Subnavigation, Right">
<span>Subnavigation, Right</span>
</a>
</li>
<li>
<a href="#" title="Subnavigation, Right and 2 Columns">
<span>Subnavigation, Right and 2 Columns</span>
</a>
</li>
<li>
<a href="#" title="Feature">
<span>Feature</span>
</a>
</li>
<li>
<a href="#" title="Startpage">
<span>Startpage</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Content Examples">
<span>Content Examples</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Text">
<span>Text</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Rich Text">
<span>Rich Text</span>
</a>
</li>
<li>
<a href="#" title="Headers">
<span>Headers</span>
</a>
</li>
<li>
<a href="#" title="Bullet List">
<span>Bullet List</span>
</a>
</li>
<li>
<a href="#" title="Text with Teaser">
<span>Text with Teaser</span>
</a>
</li>
<li>
<a href="#" title="Text and Icon">
<span>Text and Icon</span>
</a>
</li>
<li>
<a href="#" title="Text in Columns">
<span>Text in Columns</span>
</a>
</li>
<li>
<a href="#" title="List Group">
<span>List Group</span>
</a>
</li>
<li>
<a href="#" title="Panel">
<span>Panel</span>
</a>
</li>
<li>
<a href="#" title="Table">
<span>Table</span>
</a>
</li>
<li>
<a href="#" title="Quote">
<span>Quote</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Media">
<span>Media</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Audio">
<span>Audio</span>
</a>
</li>
<li>
<a href="#" title="Card Group">
<span>Card Group</span>
</a>
</li>
<li>
<a href="#" title="Icon Group">
<span>Icon Group</span>
</a>
</li>
<li>
<a href="#" title="Gallery">
<span>Gallery</span>
</a>
</li>
<li>
<a href="#" title="Text and Images">
<span>Text and Images</span>
</a>
</li>
<li>
<a href="#" title="Text and Media">
<span>Text and Media</span>
</a>
</li>
<li>
<a href="#" title="File downloads">
<span>File downloads</span>
</a>
</li>
<li>
<a href="#" title="Images">
<span>Images</span>
</a>
</li>
<li>
<a href="#" title="Media">
<span>Media</span>
</a>
</li>
<li>
<a href="#" title="External Media">
<span>External Media</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Interactive">
<span>Interactive</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Accordion">
<span>Accordion</span>
</a>
</li>
<li>
<a href="#" title="Carousel">
<span>Carousel</span>
</a>
</li>
<li>
<a href="#" title="Tab">
<span>Tab</span>
</a>
</li>
<li>
<a href="#" title="Timeline">
<span>Timeline</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Form elements">
<span>Form elements</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Forms">
<span>Forms</span>
</a>
</li>
<li>
<a href="#" title="Login">
<span>Login</span>
</a>
</li>
<li>
<a href="#" title="Search">
<span>Search</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Menu's">
<span>Menu's</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Abstract">
<span>Abstract</span>
</a>
</li>
<li>
<a href="#" title="Cards">
<span>Cards</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Page 1">
<span>Page 1</span>
</a>
</li>
<li>
<a href="#" title="Page 2">
<span>Page 2</span>
</a>
</li>
<li>
<a href="#" title="Page 3">
<span>Page 3</span>
</a>
</li>
<li>
<a href="#" title="Page 4">
<span>Page 4</span>
</a>
</li>
<li>
<a href="#" title="Page 5">
<span>Page 5</span>
</a>
</li>
<li>
<a href="#" title="Page 6">
<span>Page 6</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Categorized">
<span>Categorized</span>
</a>
</li>
<li>
<a href="#" title="Pages">
<span>Pages</span>
</a>
</li>
<li>
<a href="#" title="Recently Updated">
<span>Recently Updated</span>
</a>
</li>
<li>
<a href="#" title="Related Pages">
<span>Related Pages</span>
</a>
</li>
<li>
<a href="#" title="Sections">
<span>Sections</span>
</a>
</li>
<li>
<a href="#" title="Sitemap">
<span>Sitemap</span>
</a>
</li>
<li>
<a href="#" title="Thumbnails">
<span>Thumbnails</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Page 1">
<span>Page 1</span>
</a>
</li>
<li>
<a href="#" title="Page 2">
<span>Page 2</span>
</a>
</li>
<li>
<a href="#" title="Page 3">
<span>Page 3</span>
</a>
</li>
<li>
<a href="#" title="Page 4">
<span>Page 4</span>
</a>
</li>
<li>
<a href="#" title="Page 5">
<span>Page 5</span>
</a>
</li>
<li>
<a href="#" title="Page 6">
<span>Page 6</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" title="Special elements">
<span>Special elements</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Insert records">
<span>Insert records</span>
</a>
</li>
<li>
<a href="#" title="HTML">
<span>HTML</span>
</a>
</li>
<li>
<a href="#" title="Divider">
<span>Divider</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="And more...">
<span>And more...</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Frames">
<span>Frames</span>
</a>
</li>
<li>
<a href="#" title="Images with links">
<span>Images with links</span>
</a>
</li>
<li>
<a href="#" title="Languages and characters">
<span>Languages and characters</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="header-section header-section-bottom">
<div class="container">
<nav id="mainnavigation" class="navbar-expand-lg">
<ul class="navbar-nav navbar-nav-mega" role="menu">
<li class="nav-item active" role="none">
<a href="#" id="nav-item-1" class="nav-link" role="menuitem">
<span class="nav-link-text">
Home <span class="sr-only">(current)</span>
</span>
</a>
</li>
<li class="nav-item" role="none">
<a href="#" id="nav-item-2" class="nav-link" role="menuitem">
<span class="nav-link-text">
Customizings </span>
</a>
</li>
<li class="nav-item" role="none">
<a href="#" id="nav-item-3" class="nav-link" role="menuitem">
<span class="nav-link-text">
Features </span>
</a>
</li>
<li class="nav-item" role="none">
<a href="#" id="nav-item-4" class="nav-link panel-toggle" role="menuitem" aria-haspopup="true" aria-expanded="false">
<span class="nav-link-text">
Pages </span>
</a>
<div class="panel">
<div class="container">
<div class="row">
<div class="col-12">
<div class="panel-headline">
<a class="h3" href="#" role="menuitem">
Pages
</a>
<button class="panel-close">
<svg class="panel-close-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="row">
<ul class="panel-nav panel-nav-level-1" role="menu" aria-label="Pages">
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Default </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
2 Columns </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
2 Columns 25/75 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
2 Columns 50/50 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
2 Columns, Offset Right </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
3 Columns </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Simple </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Subnavigation, Left </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Subnavigation, Left and 2 Columns </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Subnavigation, Right </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Subnavigation, Right and 2 Columns </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Feature </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Startpage </span>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item" role="none">
<a href="#" id="nav-item-5" class="nav-link panel-toggle" role="menuitem" aria-haspopup="true" aria-expanded="false">
<span class="nav-link-text">
Content Examples </span>
</a>
<div class="panel">
<div class="container">
<div class="row">
<div class="col-12">
<div class="panel-headline">
<a class="h3" href="#" role="menuitem">
Content Examples
</a>
<button class="panel-close">
<svg class="panel-close-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="row">
<ul class="panel-nav panel-nav-level-1" role="menu" aria-label="Content Examples">
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Text </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Text">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Rich Text </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Headers </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Bullet List </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Text with Teaser </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Text and Icon </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Text in Columns </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
List Group </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Panel </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Table </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Quote </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Media </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Media">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Audio </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Card Group </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Icon Group </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Gallery </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Text and Images </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Text and Media </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
File downloads </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Images </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Media </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
External Media </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Interactive </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Interactive">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Accordion </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Carousel </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Tab </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Timeline </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Form elements </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Form elements">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Forms </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Login </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Search </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Menu's </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Menu's">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Abstract </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Cards </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-3" role="menu" aria-label="Cards">
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 1 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 2 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 3 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 4 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 5 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 6 </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Categorized </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Pages </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Recently Updated </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Related Pages </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Sections </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Sitemap </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Thumbnails </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-3" role="menu" aria-label="Thumbnails">
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 1 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 2 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 3 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 4 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 5 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 6 </span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Special elements </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Special elements">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Insert records </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
HTML </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Divider </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
And more... </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="And more...">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Frames </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Images with links </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Languages and characters </span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
{% import '@macro-render' as render %}
{% import '@macro-img' as img %}
{% set headerClass = ['bp-page-header navbar'] %}
{% if logo.normal %}
{% set headerClass = headerClass|merge(['navbar-has-image']) %}
{% endif %}
{% if theme.navigation.type %}
{% set class = 'navbar-' ~ theme.navigation.type ~ ' navbar-fixed-'
~ theme.navigation.type
%}
{% set headerClass = headerClass|merge([class]) %}
{% else %}
{% set headerClass = headerClass|merge(['navbar-top']) %}
{% endif %}
{% set headerClass = headerClass|merge(['header-layout-large']) %}
{% set logoAlt = siteTitle %}
<header id="page-header" class="{{ headerClass|join(' ') }}">
<div class="header-section header-section-top">
<div class="container">
{% set linkModifier = logo.normal ? 'image' : 'text' %}
<a href="#"
class="navbar-brand navbar-brand-{{ linkModifier }}"
title="{{ settings.logo.linktitle }}">
{% if logo.normal %}
{% set logoNormalSrc = img.src(logo.normal) %}
<img class="navbar-brand-logo-normal"
src="{{ logoNormalSrc }}"
alt="{{ logoAlt }}"
height="{{ settings.logo.height }}"
width="{{ settings.logo.width }}" />
{% else %}
<span>{{ siteTitle }}</span>
{% endif %}
</a>
<div class="navbar-search">
{% include '@atom-search' %}
</div>
<div class="navbar-language">
{{ render.frames(footer.language) }}
</div>
<div class="navbar-mmenu">
{% include '@frame-menu-mmenu' with {
mburger: true,
menu: header.mainnavigation[0].context.menu
} %}
</div>
</div>
</div>
<div class="header-section header-section-bottom">
<div class="container">
{% if header.mainnavigation %}
<nav id="mainnavigation" class="navbar-expand-lg">
{{
render.frames({
type: 'menu-mega',
context: header.mainnavigation[0].context
})
}}
</nav>
{% endif %}
</div>
</div>
</header>
{
"siteTitle": "Fractal",
"headerVariant": "bootstrap-default",
"footerVariant": "bootstrap-default",
"settings": {
"logo": {
"width": null,
"height": null,
"linktitle": null
}
},
"logo": {
"normal": {
"url": null,
"holder": {
"width": 150,
"height": 75,
"theme": "vine",
"text": "Logo"
}
},
"inverted": {
"url": null,
"holder": {
"width": 150,
"height": 75,
"theme": "lava",
"text": "Logo"
}
}
},
"theme": {
"navigation": {
"style": "default",
"type": null
},
"meta": {
"enable": null
},
"language": {
"enable": null
},
"copyright": {
"enable": null
},
"socialmedia": {
"enable": null
}
},
"header": {
"mainnavigation": [
{
"type": "menu-main",
"context": {
"menu": [
{
"title": "Home",
"link": "#",
"target": null,
"active": true,
"current": true
},
{
"link": "#",
"title": "Customizings"
},
{
"link": "#",
"title": "Features"
},
{
"link": "#",
"title": "Pages",
"children": [
{
"link": "#",
"title": "Default"
},
{
"link": "#",
"title": "2 Columns"
},
{
"link": "#",
"title": "2 Columns 25/75"
},
{
"link": "#",
"title": "2 Columns 50/50"
},
{
"link": "#",
"title": "2 Columns, Offset Right"
},
{
"link": "#",
"title": "3 Columns"
},
{
"link": "#",
"title": "Simple"
},
{
"link": "#",
"title": "Subnavigation, Left"
},
{
"link": "#",
"title": "Subnavigation, Left and 2 Columns"
},
{
"link": "#",
"title": "Subnavigation, Right"
},
{
"link": "#",
"title": "Subnavigation, Right and 2 Columns"
},
{
"link": "#",
"title": "Feature"
},
{
"link": "#",
"title": "Startpage"
}
]
},
{
"link": "#",
"title": "Content Examples",
"children": [
{
"link": "#",
"title": "Text",
"children": [
{
"link": "#",
"title": "Rich Text"
},
{
"link": "#",
"title": "Headers"
},
{
"link": "#",
"title": "Bullet List"
},
{
"link": "#",
"title": "Text with Teaser"
},
{
"link": "#",
"title": "Text and Icon"
},
{
"link": "#",
"title": "Text in Columns"
},
{
"link": "#",
"title": "List Group"
},
{
"link": "#",
"title": "Panel"
},
{
"link": "#",
"title": "Table"
},
{
"link": "#",
"title": "Quote"
}
]
},
{
"link": "#",
"title": "Media",
"children": [
{
"link": "#",
"title": "Audio"
},
{
"link": "#",
"title": "Card Group"
},
{
"link": "#",
"title": "Icon Group"
},
{
"link": "#",
"title": "Gallery"
},
{
"link": "#",
"title": "Text and Images"
},
{
"link": "#",
"title": "Text and Media"
},
{
"link": "#",
"title": "File downloads"
},
{
"link": "#",
"title": "Images"
},
{
"link": "#",
"title": "Media"
},
{
"link": "#",
"title": "External Media"
}
]
},
{
"link": "#",
"title": "Interactive",
"children": [
{
"link": "#",
"title": "Accordion"
},
{
"link": "#",
"title": "Carousel"
},
{
"link": "#",
"title": "Tab"
},
{
"link": "#",
"title": "Timeline"
}
]
},
{
"link": "#",
"title": "Form elements",
"children": [
{
"link": "#",
"title": "Forms"
},
{
"link": "#",
"title": "Login"
},
{
"link": "#",
"title": "Search"
}
]
},
{
"link": "#",
"title": "Menu's",
"children": [
{
"link": "#",
"title": "Abstract"
},
{
"link": "#",
"title": "Cards",
"children": [
{
"link": "#",
"title": "Page 1"
},
{
"link": "#",
"title": "Page 2"
},
{
"link": "#",
"title": "Page 3"
},
{
"link": "#",
"title": "Page 4"
},
{
"link": "#",
"title": "Page 5"
},
{
"link": "#",
"title": "Page 6"
}
]
},
{
"link": "#",
"title": "Categorized"
},
{
"link": "#",
"title": "Pages"
},
{
"link": "#",
"title": "Recently Updated"
},
{
"link": "#",
"title": "Related Pages"
},
{
"link": "#",
"title": "Sections"
},
{
"link": "#",
"title": "Sitemap"
},
{
"link": "#",
"title": "Thumbnails",
"children": [
{
"link": "#",
"title": "Page 1"
},
{
"link": "#",
"title": "Page 2"
},
{
"link": "#",
"title": "Page 3"
},
{
"link": "#",
"title": "Page 4"
},
{
"link": "#",
"title": "Page 5"
},
{
"link": "#",
"title": "Page 6"
}
]
}
]
},
{
"link": "#",
"title": "Special elements",
"children": [
{
"link": "#",
"title": "Insert records"
},
{
"link": "#",
"title": "HTML"
},
{
"link": "#",
"title": "Divider"
}
]
},
{
"link": "#",
"title": "And more...",
"children": [
{
"link": "#",
"title": "Frames"
},
{
"link": "#",
"title": "Images with links"
},
{
"link": "#",
"title": "Languages and characters"
}
]
}
]
}
]
}
}
]
},
"breadcrumb": [
{
"title": "Startpage"
},
{
"title": "Subpage"
},
{
"title": "Current Page"
}
],
"border": [
{
"type": "text",
"context": {
"bodytext": "Border"
}
}
],
"footer_content": {
"left": [
{
"type": "text",
"context": {
"bodytext": "Footer: Left"
}
}
],
"center": [
{
"type": "text",
"context": {
"bodytext": "Footer: Center"
}
}
],
"right": [
{
"type": "text",
"context": {
"bodytext": "Footer: Right"
}
}
],
"newsletter": [
{
"type": "forms",
"context": {
"background_color_class": "dark",
"frame_class": "section footer-section footer-section-newsletter",
"form": {
"submit": {
"label": "Submit"
},
"fieldsets": [
{
"label": "Newsletter",
"elements": [
{
"type": "input",
"context": {
"label": "Email",
"placeholder": "Please enter your email",
"required": true
}
}
]
}
]
}
}
}
]
},
"footer": {
"meta": [
{
"type": "menu-meta",
"context": {
"menu": [
{
"title": "Imprint"
},
{
"title": "Privacy"
}
]
}
}
],
"language": [
{
"type": "menu-language",
"context": {
"menu": [
{
"title": "English",
"active": true
},
{
"title": "German"
},
{
"title": "French (not available)",
"available": false
}
]
}
}
],
"copyright": [
{
"type": "text",
"context": {
"space_inner_before_class": "none",
"space_inner_after_class": "none",
"bodytext": "© copyright Project {{ \"now\"|date(\"Y\") }}"
}
}
],
"sociallinks": {
"channels": {
"facebook": {
"label": "Facebook",
"url": "#"
},
"instagram": {
"label": "Instagram",
"url": "#"
},
"youtube": {
"label": "Youtube",
"url": "#"
}
}
}
}
}
.header-layout-large {
$navbar-breakpoint: lg !default;
$nav-link-color: $white !default;
$section-bottom-bg-color: $primary !default;
padding: 0;
.header-section {
width: 100%;
}
.header-section-bottom {
display: none;
background-color: $section-bottom-bg-color;
@include media-breakpoint-up($navbar-breakpoint) {
display: block;
}
}
.navbar-search {
display: none;
@include media-breakpoint-up($navbar-breakpoint) {
display: block;
}
}
.navbar-language {
display: none;
@include media-breakpoint-up($navbar-breakpoint) {
display: block;
}
.language-menu {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
li {
display: flex;
&::before {
display: block;
margin-right: 3px;
margin-left: 3px;
content: "|";
}
&:first-child {
&::before {
content: none;
}
}
}
.text-muted {
display: none;
}
}
.navbar-mmenu {
@include media-breakpoint-up($navbar-breakpoint) {
display: none;
}
}
.nav-link {
color: $nav-link-color;
@include hover-focus () {
color: $nav-link-color;
}
}
}
No notes defined.