All Style
<script>
window.addEventListener('DOMContentLoaded', function () {
// Step 1: Grab the logo <img> and the <nav>
const logoImg = document.querySelector('.amplify-target-locator h1 img');
const nav = document.querySelector('.amplify-target-locator nav');
if (!logoImg || !nav) return;
// Step 2: Wrap the logo image in a styled container div
const logoWrapper = document.createElement('div');
logoWrapper.style.position = 'absolute';
logoWrapper.style.top = '-20px'; // adjust as needed
logoWrapper.style.left = '0';
logoWrapper.style.zIndex = '10';
logoWrapper.style.width = '140px'; // control the logo size
logoWrapper.style.pointerEvents = 'none'; // avoid interfering with clicks
logoWrapper.className = 'logo-overlap-wrapper';
// Resize the logo image
logoImg.style.width = '100%';
logoImg.style.height = 'auto';
// Move the logo into the wrapper
const logoParent = logoImg.parentElement;
logoParent.insertBefore(logoWrapper, logoImg);
logoWrapper.appendChild(logoImg);
// Step 3: Push the nav to the right to make space
nav.style.marginLeft = '160px'; // must be slightly more than logoWrapper width
});
</script>
<!-- Showdown.js for Markdown conversion -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
<!-- Google Translate setup -->
<div id="google_translate_element" style="display: none;"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT,
autoDisplay: false
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- Combined Header + Translate + Markdown Script -->
<script>
document.addEventListener('DOMContentLoaded', function () {
// === 1. Inject Custom Header Bar ===
const headerBar = document.createElement('header');
headerBar.className = 'header-link-bar';
headerBar.innerHTML = `
<div class="container">
<div id="google_translate_element_wrapper"></div>
<div class="right-links">
<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&or=0&w=100&h=100&fit=max&auto=format%2Ccompress&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&or=0&w=100&h=100&fit=max&auto=format%2Ccompress&s=80a7bc857a61023c18c690d6561311f7" alt="">
Contact Us
</a>
</div>
</div>
`;
const existingHeader = document.querySelector('header');
if (existingHeader && existingHeader.parentNode) {
existingHeader.parentNode.insertBefore(headerBar, existingHeader);
}
// === 2. Inject Styling ===
const style = document.createElement('style');
style.textContent = `
.header-link-bar {
position: static;
color: #fff;
background-color: #4a5361;
padding: 0 15px;
}
.header-link-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
height: 48px;
font-size: 14px;
letter-spacing: 0.02em;
padding-top: 8px;
padding-bottom: 8px;
}
.header-link-bar .right-links {
display: flex;
align-items: center;
}
.header-link-bar a {
color: #fff !important;
font-weight: bold;
display: flex;
align-items: center;
margin-left: 30px;
text-decoration: none;
gap: 6px;
}
.header-link-bar a:hover,
.header-link-bar a:focus {
color: #e6e6e6 !important;
}
.header-link-bar .container img {
max-height: 14px;
height: auto;
width: auto;
margin-right: 10px;
}
/* Mobile Styles */
@media (max-width: 767px) {
.header-link-bar .container {
flex-direction: column;
align-items: center;
gap: 12px;
padding: 12px;
height: auto;
text-align: center;
}
.header-link-bar .right-links {
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 6px;
gap: 10px;
}
.header-link-bar a {
margin: 0;
padding: 8px 0;
font-size: 16px;
}
.header-link-bar .container img {
max-height: 18px;
margin-right: 8px;
}
.header-link-bar #google_translate_element select {
width: 100%;
font-size: 14px;
text-align: center;
}
#google_translate_element_wrapper {
width: 100%;
justify-content: center;
}
}
/* Google Translate Dropdown Styling */
.header-link-bar #google_translate_element select {
background-color: #4a5361;
color: #fff;
border: 1px solid #888;
border-radius: 4px;
padding: 3px 5px;
font-size: 13px;
height: 28px;
}
.header-link-bar .goog-logo-link,
.header-link-bar .goog-te-gadget span,
.header-link-bar .VIpgJd-ZVi9od-xl07Ob-lTBxed {
color: #fff !important;
font-size: 12px !important;
white-space: nowrap !important;
}
.header-link-bar .goog-te-gadget {
display: flex !important;
align-items: center !important;
gap: 4px;
height: 24px !important;
line-height: 24px !important;
padding: 0 !important;
margin: 0 !important;
flex-wrap: nowrap !important;
font-family: Arial, sans-serif !important;
font-size: 11px !important;
color: #fff !important;
}
#google_translate_element_wrapper {
display: flex;
align-items: center;
}
`;
document.head.appendChild(style);
// === 3. Move Google Translate into Header ===
const translateEl = document.getElementById('google_translate_element');
const customWrapper = document.getElementById('google_translate_element_wrapper');
if (translateEl && customWrapper) {
customWrapper.appendChild(translateEl);
translateEl.style.display = 'block';
}
// === 4. Markdown Table Conversion ===
if (window.showdown) {
const converter = new showdown.Converter();
document.querySelectorAll('#poc table.table td, #poc table.table th').forEach(cell => {
const html = converter.makeHtml(cell.textContent);
cell.innerHTML = html;
});
}
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const searchBox = document.querySelector(".amplify-public-target-locator");
if (searchBox && !searchBox.classList.contains("search-enhanced")) {
searchBox.classList.add("search-enhanced");
// Create wrapper span
const wrapper = document.createElement("span");
wrapper.className = "search-inline-wrapper";
// Create label
const label = document.createElement("span");
label.className = "search-label search-inline-label";
label.textContent = "Search";
// Move children into wrapper
while (searchBox.firstChild) {
wrapper.appendChild(searchBox.firstChild);
}
// Insert label before icon
wrapper.insertBefore(label, wrapper.firstChild);
searchBox.appendChild(wrapper);
// Attach click handler to wrapper AND label
function triggerSearchModal() {
const trigger = searchBox.querySelector("button, svg");
if (trigger) {
trigger.dispatchEvent(new MouseEvent("click", { bubbles: true }));
}
}
wrapper.addEventListener("click", triggerSearchModal);
label.addEventListener("click", triggerSearchModal);
}
});
</script>
<style>
.amplify-public-target-locator.search-enhanced {
display: flex;
align-items: center;
cursor: pointer;
color: white;
}
.search-inline-wrapper {
display: inline-flex;
align-items: center;
}
.search-label {
margin-right: 0.5em; /* ⬅️ This is the gap between text and icon */
font-weight: bold;
white-space: nowrap;
color: white;
}
.search-inline-label {
font-weight: bold;
font-size: 1rem;
white-space: nowrap;
}
.amplify-public-target-locator svg {
width: 20px;
height: 20px;
stroke: white;
fill: none;
stroke-width: 2;
transition: transform 0.2s ease;
}
.amplify-public-target-locator:hover svg {
transform: scale(1.1);
}
</style>