Header

<header class="site-header">

    <div class="site-header__container">

        <a class="site-header__logo" href="#">
            <svg><use xlink:href="#logo-horizontal"></use></svg>
        </a>

        <nav class="site-header__navigation">

            <ul class="">

                <li>
                    <a href="#">What is Open Contracting</a>
                </li>

                <li>

                    <a href="#">Impact</a>

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

                    <nav class="site-header__mega-nav / mega-menu" aria-label="secondary">

                        <div class="mega-menu__container">

                            <h3 class="mega-menu__heading">

                                <a class="arrow-link" data-icon-color="white" href="#">
                                    <svg class="arrow-link__icon"><use xlink:href="#icon-arrow-circle"></use></svg>
                                    <span class="arrow-link__label">Learn more about who we are</span>
                                </a>

                            </h3>

                            <div class="mega-menu__intro">
                                <p>We transform public contracting so that it is fair and efficient. Learn about who we are, our vision, mission, strategy and values.</p>
                            </div>

                            <ul class="mega-menu__nav">

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

                                <li>
                                    <a href="#">Advisory Board</a>
                                </li>

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

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

                            </ul>

                            <ul class="mega-menu__nav">

                                <li>

                                    <span class="mega-menu__sub-nav-heading">Topics</span>

                                    <ul class="mega-menu__sub-nav">

                                        <li>
                                            <a href="#">Beneficial Ownership</a>
                                        </li>

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

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

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

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

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

                                    </ul>

                                </li>

                            </ul>

                        </div>

                    </nav>

                </li>

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

                <li>

                    <a href="#">Data</a>

                    <ul>
                        <li><a href="#">Data Standard</a></li>
                    </ul>

                </li>

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

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

            </ul>

            <div class="site-header__mobile-language">
                <a href="#">Espanol</a>
            </div>

        </nav>

        <div class="site-header__toolbox">

            <a href="#">Data Standard</a>

            <a href="#">Worldwide</a>

            <div class="select-menu select-menu--block select-menu--alt select-menu--small">

                <label class="visually-hidden">Child marriage and…</label>

                <select class="">
                    <option>Spanish</option>
                    <option>English</option>
                </select>

                <div class="select-menu__arrow"></div>

            </div>

            <div class="site-header__search">

                <input type="text" placeholder="Search">

                <button class="button--naked">
                    <svg><use xlink:href="#icon-search-rounded"></use></svg>
                </button>

            </div>

        </div>

        <div class="site-header__hamburger">

            <svg data-icon="menu">
                <use xlink:href="#icon-menu" />
            </svg>

            <svg data-icon="close">
                <use xlink:href="#icon-close" />
            </svg>

        </div>

    </div>

</header>