With Header

<div class="context-dark has-hero">
    <header class="iop-header">
        <div class="container">
            <div class="iop-header__inner">
                <span role="button" tabindex="0" aria-pressed="false" class="iop-header__explore-button" data-toggle="other-sites" data-toggle-scroll="disable" data-toggle-remove="profile">
        Explore
      </span>
                <span role="button" tabindex="0" aria-pressed="false" class="iop-header__menu-button" data-toggle="nav" data-toggle-scroll="disable" data-toggle-remove="other-sites,profile">
        Menu
      </span>
                <span role="button" tabindex="0" aria-pressed="false" class="iop-header__close-button" data-toggle-scroll="enable" data-toggle-remove="nav,other-sites,profile">
        Close
      </span>
                <a class="iop-header__logo" href="#0">
        IOP | Institute of Physics
      </a>
                <div class="iop-header__nav">
                    <nav class="iop-link-list iop-link-list--staggered iop-nav" data-toggle-target="nav" data-expandable-nav>
                        <ul>
                            <li>
                                <a href="#0">About</a>
                                <ul class="iop-link-list__sublist">
                                    <li>
                                        <a href="#0">Publications</a>
                                    </li>
                                    <li>
                                        <a href="#0">Education</a>
                                    </li>
                                    <li>
                                        <a href="#0">Activities</a>
                                    </li>

                            </li>
                            </ul>
                            </li>
                            <li>
                                <a href="#0">Resources</a>
                            </li>
                            <li>
                                <a href="#0">Visit</a>
                            </li>
                            <li>
                                <a href="#0">Contact</a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="iop-header__actions">
                    <a href="#0" class="iop-avatar iop-header__user-button" data-toggle="profile" data-toggle-remove="nav,other-sites" data-toggle-scroll="disable" style="background-image: url(https://ca.slack-edge.com/T0347CC9W-U715K3AKX-10679806659f-48)">
          
          
        </a>
                </div>
            </div>
        </div>

        <div class="iop-tray iop-tray--other-sites" data-toggle-target="other-sites">
            <div class="iop-tray__screen" role="button" tabindex="0" aria-pressed="false" data-toggle="other-sites" data-toggle-scroll="enable"></div>
            <div class="iop-tray__inner context-dark">
                <span role="button" tabindex="0" aria-pressed="false" class="iop-tray__close-button" data-toggle-scroll="enable" data-toggle-remove="other-sites">
        Close
      </span>
                <div class="iop-tray__container">
                    <nav class="iop-other-sites iop-link-list" data-toggle-target="other-sites">
                        <h4 class="iop-other-sites__title iop-text-muted">Explore</h4>
                        <ul>
                            <li>
                                <a href="#0">Website 1</a>
                            </li>
                            <li>
                                <a href="#0">Website 2</a>
                            </li>
                            <li>
                                <a href="#0">Website 3</a>
                            </li>
                            <li>
                                <a href="#0">Website 4</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        <div class="iop-tray iop-tray--profile" data-toggle-target="profile">
            <div class="iop-tray__screen" role="button" tabindex="0" aria-pressed="false" data-toggle="profile" data-toggle-scroll="enable"></div>
            <div class="iop-tray__inner context-light">
                <div class="iop-tray__container">
                    <div class="iop-profile-nav">
                        <div class="iop-profile-nav__header">
                            <p class="h3 margin-reset">
                                <span class="iop-text-sm iop-text-accent">Welcome,</span>
                                <br> Robin Ince
                            </p>
                            <span class="iop-avatar iop-profile-nav__avatar" style="background-image: url(https://ca.slack-edge.com/T0347CC9W-U715K3AKX-10679806659f-48)">
              
              
            </span>
                        </div>

                        <nav class="iop-link-list iop-profile-nav__list" data-toggle-target="profile">
                            <ul>
                                <li class="is-active">
                                    <a href="#0">For you</a>
                                </li>
                                <li>
                                    <a href="#0">Account</a>
                                </li>
                            </ul>
                        </nav>

                        <p class="h4 iop-text-accent">
                            <a href="#0">Logout</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="iop-hero iop-hero--lg context-dark" style="background-image: url('https://images.unsplash.com/photo-1487235829740-e0ac5a286e1c?ixlib=rb-0.3.5&s=d7b2968dc15cecb41656e1fa50c9bbf0&auto=format&fit=crop&w=2000&q=80')">
        <div class="iop-hero__inner">
            <div class="container">
                <div class="iop-heading-lockup">
                    <p class="iop-text-meta">Magna pars studiorum prodita</p>
                    <h1>
                        Physics for
                        <span>everyone</span>
                    </h1>
                </div>
                <div class="buffer">
                    <a href="#0" class="iop-button">
          <span>Join IOP</span>
        </a>
                    <a href="#0" class="iop-button iop-button--tertiary">
          <span>Login</span>
        </a>
                </div>
            </div>
        </div>
    </div>

</div>