{% if fn('is_front_page') %}
    <div class="off-canvas position-left" id="offcanvas-menu" data-off-canvas >
        <div id="masthead" class="site-header" role="banner">
            <div class="menuwrap">
                <div class="menu-logo">
                    <a href="#" class="icons icon-close" data-close></a>
                    <img src="<?php bloginfo('template_directory'); ?>/assets/img/logo-alternate.png" />
                    <a href="#" id="mobile-search-button" class="icons icon-search"></a>
                </div>
                {% block header %}
                <header>
                    <nav id="main-navigation" class="site-navigation montserrat-bold" role="navigation">
                        <ul>
                            {% for item in main_menu.get_items %}
                                <li class="{{item.class}}" ><a href="{{ item.link }}" >{{ item.title }}</a></li>
                            {% endfor %}
                        </ul>
                    </nav>
                </header>
                <!-- #masthead -->
                {% endblock %}
                <div class="stay-informed">
                    <button href="#" data-toggle="modal" data-target="#subscribe" class="btn btn-color btn-wide">Stay Informed</button>
                </div>
                <div class="menu-footer">
                    <div class="menu-footer-social">
                        <a href="#" class="icons icon-facebook"></a>
                        <a href="#" class="icons icon-twitter"></a>
                        <a href="#" class="icons icon-instagram"></a>
                    </div>
                    <div class="menu-footer-links">
                        {% if legal_page %}
                            <a href="{{ legal_page.link }}" >Privacy Policy</a>
                        {% endif %}
                        <a href="/">Contact</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endif %}
