Skip to main content

Back up of header content

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Only apply this on pages with an Amplify header
    const amplifyHeader = document.querySelector('header.amplify-header');
    if (!amplifyHeader) return;

    // Create the new top header
    const headerBar = document.createElement('header');
    headerBar.className = 'header-link-bar';
    headerBar.innerHTML = `
        <div class="container">
            <a href="/employment-opportunities">
                <img src="https://streamline.imgix.net/8dd2697a-cbc0-48ff-a9ad-d69c6db53c2a/6713c1d0-2364-4ee2-990c-514b51b38097/309041_users_group_people_icon.png?ixlib=rb-1.1.0&amp;or=0&amp;w=100&amp;h=100&amp;fit=max&amp;auto=format%2Ccompress&amp;s=ee08901cf7fac4112c067c9a701ccac6" alt="">
                Join Metro Fire
            </a>
            <a href="/contact-us">
                <img src="https://streamline.imgix.net/8dd2697a-cbc0-48ff-a9ad-d69c6db53c2a/cb5ca832-b8e3-451a-9be6-c452ec222c6b/1566544_address%20book_addresses_business_contact_diary_icon.png?ixlib=rb-1.1.0&amp;or=0&amp;w=100&amp;h=100&amp;fit=max&amp;auto=format%2Ccompress&amp;s=80a7bc857a61023c18c690d6561311f7" alt="">
                Contact Us
            </a>
        </div>
    `;

    // Insert the new header above the Amplify header
    amplifyHeader.parentNode.insertBefore(headerBar, amplifyHeader);

    // Add CSS styling
    const style = document.createElement('style');
    style.textContent = `
        .header-link-bar {
            position: static;
            text-align: right;
            color: #fff;
            background-color: #4a5361;
            padding: 0 15px;
        }
        .header-link-bar a {
            color: #fff;
            font-weight: bold;
        }
        .header-link-bar a:hover,
        .header-link-bar a:focus {
            color: #e6e6e6;
        }
        .header-link-bar .container {
            display: flex;
            height: 48px;
            justify-content: flex-end;
            align-items: center;
            font-size: 14px;
            letter-spacing: 0.02em;
        }
        .header-link-bar .container img {
            position: relative;
            top: -1px;
            height: 18px;
            margin-right: 10px;
        }
        .header-link-bar .container a {
            margin-left: 30px;
        }
        @media (max-width: 767px) {
            .header-link-bar .container {
                justify-content: center;
            }
        }
    `;
    document.head.appendChild(style);
});
</script>

<script>
  $(function() {
    let signInLink = $('.footer-poweredby a').get(0);
    signInLink.text = 'Streamline';
    signInLink.href = 'https://www.getstreamline.com';
  });
</script>

<style>
.amplify-quicklinks-container .container header {
    width: 10rem;}
 .amplify-quicklinks-container .container header h3 {text-align: center;}
.amplify-header .container h1 img {height: 7.3rem; padding: 20px 0;}
.amplify-quicklinks-container {padding: 2rem 0 2rem 0;}
.amplify-teasers {padding: 0;}
</style>