<header id="page-header" class="bp-page-header navbar navbar-mainnavigation navbar-default navbar-has-image navbar-top header-layout-bootstrap-default">
<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="" />
<img class="navbar-brand-logo-inverted" src="holder.js/150x75?auto=yes&text=Logo&theme=lava" alt="Fractal" height="" width="" />
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainnavigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav id="mainnavigation" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" id="nav-item-1" class="nav-link" title="Home">
<span class="nav-link-text">
Home <span class="sr-only">(current)</span>
</span>
</a>
</li>
<li class="nav-item">
<a href="#" id="nav-item-2" class="nav-link" title="Customizings">
<span class="nav-link-text">
Customizings </span>
</a>
</li>
<li class="nav-item">
<a href="#" id="nav-item-3" class="nav-link" title="Features">
<span class="nav-link-text">
Features </span>
</a>
</li>
<li class="nav-item dropdown dropdown-hover">
<a href="#" id="nav-item-4" class="nav-link dropdown-toggle" title="Pages" aria-haspopup="true" aria-expanded="false">
<span class="nav-link-text">
Pages </span>
</a>
<ul class="dropdown-menu" aria-labelledby="nav-item-4">
<li>
<a href="#" class="dropdown-item" title="Default">
<span class="dropdown-text">
Default </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="2 Columns">
<span class="dropdown-text">
2 Columns </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="2 Columns 25/75">
<span class="dropdown-text">
2 Columns 25/75 </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="2 Columns 50/50">
<span class="dropdown-text">
2 Columns 50/50 </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="2 Columns, Offset Right">
<span class="dropdown-text">
2 Columns, Offset Right </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="3 Columns">
<span class="dropdown-text">
3 Columns </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Simple">
<span class="dropdown-text">
Simple </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Subnavigation, Left">
<span class="dropdown-text">
Subnavigation, Left </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Subnavigation, Left and 2 Columns">
<span class="dropdown-text">
Subnavigation, Left and 2 Columns </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Subnavigation, Right">
<span class="dropdown-text">
Subnavigation, Right </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Subnavigation, Right and 2 Columns">
<span class="dropdown-text">
Subnavigation, Right and 2 Columns </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Feature">
<span class="dropdown-text">
Feature </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Startpage">
<span class="dropdown-text">
Startpage </span>
</a>
</li>
</ul>
</li>
<li class="nav-item dropdown dropdown-hover">
<a href="#" id="nav-item-5" class="nav-link dropdown-toggle" title="Content Examples" aria-haspopup="true" aria-expanded="false">
<span class="nav-link-text">
Content Examples </span>
</a>
<ul class="dropdown-menu" aria-labelledby="nav-item-5">
<li>
<a href="#" class="dropdown-item" title="Text">
<span class="dropdown-text">
Text </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Media">
<span class="dropdown-text">
Media </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Interactive">
<span class="dropdown-text">
Interactive </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Form elements">
<span class="dropdown-text">
Form elements </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Menu's">
<span class="dropdown-text">
Menu's </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Special elements">
<span class="dropdown-text">
Special elements </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="And more...">
<span class="dropdown-text">
And more... </span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
{% import '@macro-render' as render %}
{% import '@macro-img' as img %}
{% set headerClass = [
'bp-page-header navbar navbar-mainnavigation navbar-'
~ theme.navigation.style
] %}
{% 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-bootstrap-default']) %}
{% set logoAlt = siteTitle %}
<header id="page-header" class="{{ headerClass|join(' ') }}">
<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 }}" />
{% if logo.inverted %}
{% set logoInvertedSrc = img.src(logo.inverted) %}
<img class="navbar-brand-logo-inverted"
src="{{ logoInvertedSrc }}"
alt="{{ logoAlt }}"
height="{{ settings.logo.height }}"
width="{{ settings.logo.width }}" />
{% endif %}
{% else %}
<span>{{ siteTitle }}</span>
{% endif %}
</a>
{% if header.mainnavigation %}
<button class="navbar-toggler collapsed"
type="button"
data-toggle="collapse"
data-target="#mainnavigation"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav id="mainnavigation" class="collapse navbar-collapse">
{# TODO: <f:render partial="DropIn/Navigation/MainBefore" arguments="{_all}" /> #}
{#
TODO: Implement theme argument to MainNavigation
Original template:
<f:render section="MainNavigation" arguments="{menu: mainnavigation, theme: theme}" />
#}
{{ render.frames(header.mainnavigation) }}
{# TODO: <f:render partial="DropIn/Navigation/MainAfter" arguments="{_all}" /> #}
</nav>
{% endif %}
</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": "#"
}
}
}
}
}
No notes defined.