Header Connected {% include 'components/core/header~connected' %}
#
HTML
<header class="alternative small-alternative header-sticky" role="banner" style="position: relative">
    <div class="main header">
        <div class="inner">
            <div class="logo">
                <span class="img">
                    <a href="/">
                        <img src="/images/mainsite5/logo@2x.png" alt="Tearfund">
                    </a>
                </span>
            </div>
            <h1 class="sub-brand">
                Connected Church
            </h1>
            <div class="inline-header-items">
                <div class="header-inline header-login"> <a class="show-lightbox" data-lightbox="99999" href="#">Login</a> </div>
                <div class="lightbox" data-lightbox="99999">
                    <h3 class="lightbox__title">
                        Login
                    </h3>
                    <div class="field-set">
                        <label class="field-set__title" for="text1">Username/Email</label>
                        <div class="field-set__content">
                            <div class="field-set__items">
                                <div class="field-set__item">
                                    <span class="field-set__label">Username/Email</span> 
                                    <input class="field-set__input" id="text1" type="text">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="field-set">
                        <label class="field-set__title" for="text1">Password</label>
                        <div class="field-set__content">
                            <div class="field-set__items">
                                <div class="field-set__item">
                                    <span class="field-set__label">Password</span> 
                                    <input class="field-set__input" id="text1" type="password">
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="submit" value="Login" class="button">
                    <a href="#" class="lightbox__close lightbox__close--icon"></a> 
                </div>
                <div class="header-inline header-search search">
                    <!--<a href="#">Search</a>-->
                    <label for="top-search">Search</label>
                    <input class="top-search" type="text" placeholder="Search">
                    <input type="button" name="btnSearch" onclick="javascript:..." class="header-search__button" id="btnSearch">
                </div>
                <div class="header-inline header-login">
<a href="#"></a>
</div>
                <div class="header-inline header-social">
                    <a href="#">Follow</a>

                    <div class="header-inline header-social--content">
<a class="header-inline header-social__icon header-social__facebook" href="#"></a>
<a class="header-inline header-social__icon header-social__twitter" href="#"></a>
<a class="header-inline header-social__icon header-social__instagram" href="#"></a>
<a class="header-inline header-social__icon header-social__email" href="#"></a>
<a class="header-inline header-social__icon header-social__rss" href="#"></a>
</div>
                </div>
                <div class="header-inline header-donate header-primary-button">
<a href="#" class="button">Donate Now</a>
</div>
            </div>
            <nav class="primary">
                <ul>
                    <li class="has-sub-nav">
                        <a href="#">About Us</a>

                        <ul>
                            <li>
                                <a href="#">Where your money goes</a>

                                <li>
                                    <a href="#">How we work</a>

                                    <li>
                                        <a href="#">History</a>

                                        <li>
                                            <a href="#">Who&#039;s who</a>

                                            <li>
                                                <a href="#">Finance</a>

                                                <li>
                                                    <a href="#">Contact us</a>

                                                </ul>
                                            </li>
                                            <li class="has-sub-nav">
                                                <a href="#">Get Involved</a>

                                                <ul>
                                                    <li>
                                                        <a href="#">Pray</a>

                                                        <li>
                                                            <a href="#">Action</a>

                                                            <li>
                                                                <a href="#">Events</a>

                                                                <li>
                                                                    <a href="#">Fundraise</a>

                                                                    <li>
                                                                        <a href="#">Your church</a>

                                                                        <li>
                                                                            <a href="#">Go overseas</a>

                                                                            <li>
                                                                                <a href="#">Volunteer</a>

                                                                                <li>
                                                                                    <a href="#">Around the UK</a>

                                                                                    <li>
                                                                                        <a href="#">Lifestyle</a>

                                                                                        <li>
                                                                                            <a href="#">Youth</a>

                                                                                            <li>
                                                                                                <a href="#">Resources</a>

                                                                                            </ul>
                                                                                        </li>
                                                                                        <li class="has-sub-nav">
                                                                                            <a href="#">Latest</a>

                                                                                            <ul>
                                                                                                <li>
                                                                                                    <a href="#">Hunger steals</a>

                                                                                                    <li>
                                                                                                        <a href="#">East Africa</a>

                                                                                                        <li>
                                                                                                            <a href="#">Yemen</a>

                                                                                                            <li>
                                                                                                                <a href="#">Middle East Crisis</a>

                                                                                                                <li>
                                                                                                                    <a href="#">Yasmin&#039;s story</a>

                                                                                                                    <li>
                                                                                                                        <a href="#">Latest stories</a>

                                                                                                                    </ul>
                                                                                                                </li>
                                                                                                            </ul>
                                                                                                        </nav>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </header>
Twig
{% if header == 'regular' or header == 'usa' %}
    <header class="regular header-small header-sticky" role="banner" {% if view != 'template' %}style="position: relative"{% endif %}>
{% elseif header == 'alternative' or header == 'tilz' %}
	<header class="alternative small-alternative header-sticky" role="banner" {% if view != 'template' %}style="position: relative"{% endif %}>
{% endif %}
	<div class="main header">
		<div class="inner">
			<div class="logo">
					<span class="img"><a href="/"><img src="{{logo}}" alt="Tearfund"></a></span>
			</div>
			{% if header == 'alternative' or header == 'tilz' %}
				<h1 class="sub-brand">{{sub_brand}}</h1>
			{% endif %}
			<div class="inline-header-items">

				{% if header == 'tilz' %}
					<div class="header-inline header-language">
	                    <a class="" href="#">English</a>
	                    <div class="header-language--content">
	                        <ul>
	                            <li><a class="" href="#">Español</a></li>
	                            <li><a class="" href="#">Français</a></li>
	                            <li><a class="" href="#">Português</a></li>
	                            <li><a class="" href="#">Other languages</a></li>
	                        </ul>
	                    </div>
	                </div>    
	            {% endif %}
				
				{% if header == 'alternative' %}
					<div class="header-inline header-login">
	                    <a class="show-lightbox" data-lightbox="99999" href="#">Login</a>
	                </div>

	                <div class="lightbox"  data-lightbox="99999">
	                    <h3 class="lightbox__title">Login</h3>
	                    <div class="field-set">
	                        <label class="field-set__title" for="text1">Username/Email</label>

	                        <div class="field-set__content">
	                            <div class="field-set__items">
	                                <div class="field-set__item">
	                                    <span class="field-set__label">Username/Email</span>
	                                    <input class="field-set__input" id="text1" type="text">
	                                </div>
	                            </div>
	                        </div>

	                    </div>
	                    <div class="field-set">
	                        <label class="field-set__title" for="text1">Password</label>

	                        <div class="field-set__content">
	                            <div class="field-set__items">
	                                <div class="field-set__item">
	                                    <span class="field-set__label">Password</span>
	                                    <input class="field-set__input" id="text1" type="password">
	                                </div>
	                            </div>
	                        </div>

	                    </div>
	                    <input type="submit" value="Login" class="button">
	                    <a href="#" class="lightbox__close lightbox__close--icon"></a>
	                </div>
	            {% endif %}

	            {% if header == 'alternative' or header == 'regular' or header == 'tilz' %}
					<div class="header-inline header-search search">
						<!--<a href="#">Search</a>-->
						<label for="top-search">Search</label>
						<input class="top-search" type="text" placeholder="Search">
						<input type="button" name="btnSearch" onclick="javascript:..." class="header-search__button" id="btnSearch">
					</div>
					<div class="header-inline header-login">
						<a href="#"></a>
					</div>
					<div class="header-inline header-social">
						<a href="#">Follow</a>
						<div class="header-inline header-social--content">
							<a class="header-inline header-social__icon header-social__facebook" href="#"></a>
							<a class="header-inline header-social__icon header-social__twitter" href="#"></a>
							<a class="header-inline header-social__icon header-social__instagram" href="#"></a>
							<a class="header-inline header-social__icon header-social__email" href="#"></a>
							<a class="header-inline header-social__icon header-social__rss" href="#"></a>
						</div>
					</div>
				{% endif %}

				{% if header == 'alternative' or header == 'regular' %}
				<div class="header-inline header-donate header-primary-button">
					<a href="#" class="button">Donate Now</a>
				</div>
				{% endif %}

				{% if header == 'usa' %}
					<a href="#" class="button-underline button-underline--twitter">Follow Us</a>
				{% endif %}
			
			</div>
			<nav class="primary">
				<ul>
					{% for nav in nav %}
						<li class="has-sub-nav">
							<a href="#">{{nav.title}}</a>
							<ul>
								{% for page in nav.pages %}
									<li><a href="#">{{ page }}</a>
								{% endfor %}
							</ul>
						</li>
					{% endfor %}
				</ul>
			</nav>
		</div>
	</div>
</header>
{
    "header": "alternative",
    "logo": "\/images\/mainsite5\/logo@2x.png",
    "nav": {
        "0": {
            "title": "About Us",
            "pages": {
                "0": "Where your money goes",
                "1": "How we work",
                "2": "History",
                "3": "Who's who",
                "4": "Finance",
                "5": "Contact us"
            }
        },
        "1": {
            "title": "Get Involved",
            "pages": {
                "0": "Pray",
                "1": "Action",
                "2": "Events",
                "3": "Fundraise",
                "4": "Your church",
                "5": "Go overseas",
                "6": "Volunteer",
                "7": "Around the UK",
                "8": "Lifestyle",
                "9": "Youth",
                "10": "Resources"
            }
        },
        "2": {
            "title": "Latest",
            "pages": {
                "0": "Hunger steals",
                "1": "East Africa",
                "2": "Yemen",
                "3": "Middle East Crisis",
                "4": "Yasmin's story",
                "5": "Latest stories"
            }
        }
    },
    "sub_brand": "Connected Church"
}