Header

<header class="l-header">
    <div class="o-container">
        <div class="l-header_inner">
            <div class="l-header__cols">
                <div class="l-header__col is-logo">
                    <a href="#">
                        <svg class="p-icon p-icon--logo">
                            <use href="#logo" />
                        </svg> </a>
                </div>

                <div class="l-header__col is-nav">
                    <div class="l-header__rows">
                        <div class="l-header__row">
                            <div class="l-header__utility">
                                <div class="l-header__utility-item is-nav">
                                    <nav class="p-nav-utility" aria-labelledby="nav-utility--header-utility">
                                        <header class="p-nav-utility__head">
                                            <h2 class="p-nav-utility__title" id="nav-utility--header-utility">
                                                Header Utility
                                            </h2>
                                        </header>

                                        <ul>
                                            <li>
                                                <a href="#">
                                                    Tickets
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    Photo Permits
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    Contact
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>

                                <div class="l-header__utility-item is-search">
                                    <form action="#">
                                        <input type="search" class="p-input-search">
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="l-header__row">
                            <div class="l-header__main">
                                <div class="l-header__main-item is-nav">
                                    <nav class="p-nav-main" aria-labelledby="nav-main--header-main">
                                        <header class="p-nav-main__head">
                                            <h2 class="p-nav-main__title" id="nav-main--header-main">
                                                Header Main
                                            </h2>
                                        </header>

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

                                                <ul>
                                                    <li>
                                                        <a href="#">
                                                            Child One
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            Child Two
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            Child Three
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    Learn
                                                </a>

                                                <ul>
                                                    <li>
                                                        <a href="#">
                                                            Child One
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            Child Two
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            Child Three
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    Events
                                                </a>

                                                <ul>
                                                    <li>
                                                        <a href="#">
                                                            Child One
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            Child Two
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            Child Three
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    Support
                                                </a>

                                                <ul>
                                                    <li>
                                                        <a href="#">
                                                            Child One
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            Child Two
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            Child Three
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    Rent
                                                </a>

                                                <ul>
                                                    <li>
                                                        <a href="#">
                                                            Child One
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            Child Two
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            Child Three
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    About
                                                </a>

                                                <ul>
                                                    <li>
                                                        <a href="#">
                                                            Child One
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            Child Two
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            Child Three
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>

                                <div class="l-header__main-item is-cta">
                                    <a href="#" class="p-button p-button--size-small">
                                        Donate
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>