Header

This is a presentation preview of the main header, the style changes slightly at the different breakpoints, and when the page is scrolled.

<header class="site-header__container">

    <div class="wrapper wrapper--padded">

        <div class="site-header">

            <div class="site-header__logo">
                <a href="/">
                    <img class="logo logo--desktop" src="../../../aigis_assets/images/bureau-crest-with-text.svg">
                    <img class="logo logo--desktop logo--desktop-scrolled" src="../../../aigis_assets/images/bureau-crest-with-text.svg">
                    <img class="logo logo--mobile" src="../../../aigis_assets/images/bureau-crest-with-text.svg">
                </a>
            </div>

            <nav class="site-nav__container">

                <ul class="nav / site-nav">

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

                    <li>
                        <a href="#">Our Work</a>
                    </li>

                    <li>
                        <a href="#">Our People</a>
                    </li>

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

                </ul> <!-- / .site-nav -->

            </nav> <!-- / .site-nav__container -->

        </div>

        <div class="hamburger">
            <div class="hamburger-box">
                <div class="hamburger-inner"></div>
            </div>
        </div>

    </div>

</header>