Header: Sticky

<div id="hgmOffCanvas" tabindex="-1" class="hgm-off-canvas" aria-labelledby="hgmOffCanvas">
    <div class="hgm-off-canvas__wrapper">
        <div class="hgm-off-canvas__header">
            <a href="tel:2125551212" class="hgm-off-canvas__phone"><i class="fas fa-phone-alt"></i> (212) 555-1212</a>
            <a href="javascript:void(0);" title="Close" class="hgm-off-canvas__close">Close</a>
        </div><!-- &__header -->
        <a class="hgm-off-canvas__cta" href="#">Book Online</a>
        <div class="hgm-off-canvas__body">

            <div class="hgm-drill-down open" data-level="0">
                <a class="hgm-drill-down__mobile-toggle" href="#" title="view section menu"><span>In this section</span></a>
                <nav role="navigation">
                    <div class="hgm-drill-down__heading">
                        <a title="Back" href="#" aria-disabled="true" class="back">Back</a>
                        <p class="title" data-original-link="#" data-original-title="Main Menu">
                            <a href="#">Main Menu</a>
                        </p>
                    </div><!-- &__heading -->
                    <ul class="hgm-drill-down__menu">
                        <li><a href="/services/cancer-registry">Cancer Registry</a></li>
                        <li><a href="/services/cancer-screenings">Cancer Screenings</a></li>
                        <li class="dropdown">
                            <a href="/services/surviving-cancer">Surviving Cancer</a>
                            <a role="button" aria-expanded="false" href="javascript:void(0)" title="Expand menu"></a>
                            <ul>
                                <li><a href="/services/child-link-1">Child Link One</a></li>
                                <li><a href="/services/child-link-2">Child Link Two</a></li>
                                <li><a href="/services/child-link-3">Child Link Three</a></li>
                                <li><a href="/services/child-link-4">Child Link Four</a></li>
                                <li><a href="/services/child-link-5">Child Link Five</a></li>
                                <li><a href="/services/child-link-6">Child Link Six</a></li>
                                <li><a href="/services/child-link-7">Child Link Seven</a></li>
                                <li><a href="/services/child-link-8">Child Link Eight</a></li>
                            </ul>
                        </li>
                        <li><a href="/services/link">Some Link</a></li>
                        <li class="dropdown">
                            <a href="/services/types-of-cancer">Types of Cancer</a>
                            <a role="button" aria-expanded="false" href="javascript:void(0)" title="Expand menu"></a>
                            <ul>
                                <li><a href="/services/types-of-cancer/breast-cancer">Breast Cancer</a></li>
                                <li class="dropdown">
                                    <a href="/services/types-of-cancer/lung-cancer">Lung Cancer</a>
                                    <a role="button" aria-expanded="false" href="javascript:void(0)"
                                       title="Expand menu"></a>
                                    <ul>
                                        <li><a href="/services/types-of-cancer/lung-cancer/risk">Risk Assessment</a></li>
                                        <li class="dropdown">
                                            <a href="/services/types-of-cancer/lung-cancer/treatment">Treatment Options</a>
                                            <a role="button" aria-expanded="false" href="javascript:void(0)"
                                               title="Expand menu"></a>
                                            <ul>
                                                <li><a href="/services/types-of-cancer/lung-cancer/treatment/deep-link">Deep
                                                    link</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="/services/types-of-cancer/neurological-cancer">Neurological Cancer</a></li>
                            </ul>
                        </li>
                        <li><a href="/services/another-link">Another Link</a></li>
                        <li class="subheader"><a href="#">Menu Item</a></li>
                        <li class="subheader"><a href="#">Menu Item</a></li>
                        <li class="subheader"><a href="#">Menu Item</a></li>
                        <li class="subheader"><a href="#">Menu Item</a></li>
                        <li class="subheader"><a href="#">Menu Item</a></li>
                        <li class="subheader"><a href="#">Menu Item</a></li>
                        <li class="subheader"><a href="#">Menu Item</a></li>
                        <li class="subheader"><a href="#">Menu Item</a></li>
                    </ul><!-- &__menu -->
                </nav>
            </div><!-- hgm-drill-down -->

            <div class="hgm-accordion sm">
                <div class="hgm-accordion__item">
                    <input type="checkbox" id="itemTrigger1" name="input_trigger">
                    <label for="itemTrigger1" class="hgm-accordion__label">Example dropdown</label>
                    <div class="hgm-accordion__content">
                        <div>
                            <h4>WYSIWYG Container</h4>
                            <p>This could contain addresses, hyperlinks, phone numbers, buttons, small images, etc.</p>
                            <p>If it can go in a WYSIWYG, it can go here.</p>
                        </div>
                    </div>
                </div>
            </div><!-- .hgm-accordion -->

        </div><!-- &__body -->
    </div><!-- &__wrapper -->
</div><!-- .hgm-off-canvas -->

<header class="hgm-header sticky shadow">

    <div class="hgm-header__sub-header">
        <div class="container hgm-header__sub-header-container">

            <div class="hgm-dropdown" data-remove-overlap="true">
                <button class="hgm-button hgm-dropdown__button sm" type="button" aria-expanded="false">Example dropdown</button>
                <div class="hgm-dropdown__contents">
                    <h4>WYSIWYG Container</h4>
                    <p>This could contain addresses, hyperlinks, phone numbers, buttons, small images, etc.</p>
                    <p>If it can go in a WYSIWYG, it can go here.</p>
                </div>
            </div><!-- hgm-dropdown -->

            <a class="hgm-header__sub-header-phone" href="tel:2125551212">(212) 555-1212</a>

            <ul>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
            </ul>
        </div><!-- container -->
    </div><!-- &__sub-header -->

    <div class="hgm-header__sub-menu" id="header-main-menu-expandable-menu">
        <div class="row">
            <div class="col-3">
                <h3>Top Level Item - Expandable Menu</h3>
                <a href="#">View All</a>
            </div>
            <div class="col">
                <div class="hgm-list-group multi" data-columns="3">
                    <a href="#" class="hgm-list-group__item link">An item</a>
                    <a href="#" class="hgm-list-group__item link">A second item</a>
                    <a href="#" class="hgm-list-group__item link">A third item</a>
                    <a href="#" class="hgm-list-group__item link">A fourth item</a>
                    <a href="#" class="hgm-list-group__item link active" aria-current="true">And a fifth one</a>
                    <a href="#" class="hgm-list-group__item link">And a sixth one with a long title</a>
                    <a href="#" class="hgm-list-group__item link">And a seventh one</a>
                </div><!-- .hgm-list-group -->
            </div>
        </div>
    </div><!-- &__sub-menu -->

    <div class="hgm-header__sub-menu" id="header-main-menu-another-expandable-menu">
        <div class="row">
            <div class="col-3">
                <h3>Top Level Another Expandable Menu</h3>
                <a href="#">View All</a>
            </div>
            <div class="col">
                <div class="hgm-list-group multi" data-columns="3">
                    <a href="#" class="hgm-list-group__item link">An item</a>
                    <a href="#" class="hgm-list-group__item link">A second item</a>
                    <a href="#" class="hgm-list-group__item link">A third item</a>
                    <a href="#" class="hgm-list-group__item link">A fourth item</a>
                    <a href="#" class="hgm-list-group__item link">And a fifth one</a>
                    <a href="#" class="hgm-list-group__item link">And a sixth one with a long title</a>
                    <a href="#" class="hgm-list-group__item link">And a seventh one</a>
                </div><!-- .hgm-list-group -->
            </div>
        </div>
    </div><!-- &__sub-menu -->

    <nav class="hgm-header__main-menu">
        <div class="container hgm-header__main-menu-container">
            <a class="hgm-header__brand" href="#">
                <img class="hgm-lazy" data-src="//via.placeholder.com/164x56" alt="Brand Logo"/>
            </a><!-- &__brand -->
            <ul class="hgm-header__main-menu-navigation">
                <li class="hgm-header__main-menu-navigation-item">
                    <a href="/menu-link"><span class="bar"></span>Menu link</a>
                </li>
                <li class="hgm-header__main-menu-navigation-item">
                    <a href="/menu-link-two"><span class="bar"></span>Menu link Two</a>
                </li>
                <li class="hgm-header__main-menu-navigation-item expandable">
                    <a data-target="header-main-menu-expandable-menu" href="javascript:void(0);"><span
                            class="bar"></span>Expandable Menu</a>
                </li>
                <li class="hgm-header__main-menu-navigation-item active">
                    <a href="/menu-three" class="active"><span class="bar"></span>Menu Three</a>
                </li>
                <li class="hgm-header__main-menu-navigation-item expandable">
                    <a data-target="header-main-menu-another-expandable-menu" href="javascript:void(0);"><span
                            class="bar"></span>Another Expandable Menu</a>
                </li>
            </ul><!-- &__main-menu-navigation -->
            <a class="hgm-header__main-menu-phone" href="tel:2125551212">(212) 555-1212</a>
            <a href="javascript:void(0);" data-modal-target="hgmSiteSearchModal" class="hgm-header__main-menu-search-trigger hgm-modal-trigger"><span class="visually-hidden">search</span><i class="far fa-search"></i></a>
            <a class="hgm-header__main-menu-cta" href="#">Book Online</a>
            <a href="javascript:void(0);" class="hgm-header__main-menu-offcanvas-trigger hgm-offcanvas-trigger" role="button" aria-controls="hgmOffCanvas"><span class="visually-hidden">show off canvas menu</span><i
                    class="far fa-bars"></i></a>
        </div><!-- container -->
    </nav><!-- &__main-menu -->
</header>

<main>
    <div class="container" style="margin-top:50px">
        <div class="row">
            <div class="col">
                <h1>Demonstration of a sticky header</h1>
                <p>This example is a quick exercise to illustrate how a standard header works.</p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                    culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                    culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                    culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                    culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                    culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </div>
    </div>
</main>


<div id="hgmSiteSearchModal" class="hgm-modal" aria-labelledby="hgmSiteSearchModal" tabindex="-1">
    <a href="#" aria-label="Close">Dismiss Modal</a>
    <div class="hgm-modal__wrapper">
        <a href="#" title="Close" class="hgm-modal__close">Close <i class="fas fa-times"></i></a>
        <div class="hgm-modal__body">
            <div id="hgmSiteSearch"></div><!-- #hgmSiteSearch -->
        </div>
    </div>
</div>