Skip to main content

Image as link for secondary navigation

Central Clear Creek Sanitation District website header with navigation menu and PayPort logo.
Add to advanced theme editor scripts 

in the html embed

document.addEventListener("DOMContentLoaded", function() { // Select the Pay Online link using the provided path var payOnlineLink = document.querySelector("#page-header > div > nav > div > ul > li:nth-child(2) > a"); // Check if the Pay Online link exists and contains the text "Pay Online" if (payOnlineLink && payOnlineLink.textContent.trim() === "Pay Online") { // Create the image element var payOnlineImage = document.createElement('img'); payOnlineImage.src = 'https://streamline.imgix.net/5db4ffa1-a8ab-4746-9f4e-469f6cfa95a7/330fe3c7-5646-4b54-9f20-ed925930e7cb/PayPort_logo-02.png?ixlib=rb-1.1.0&w=2000&h=2000&fit=max&or=0&s=b9a3baff000ac15eae9f05157af438cc'; payOnlineImage.alt = 'Pay Online'; // Keep the image dimensions consistent with the link size payOnlineImage.style.width = 'auto'; // Keeps original width to match link size payOnlineImage.style.height = '24px'; // You can adjust the height to match the original text size // Clear the link's current text and append the image payOnlineLink.innerHTML = ''; // Clear text payOnlineLink.appendChild(payOnlineImage); // Add the image inside the link } });

 

ChatGPT prompt 

Replace the 'NAVIGATION ITEM NAME' text in a navigation menu with an image. Ensure the image fits within the dimensions of the original text and does not disrupt the layout or link structure. Keep the link clickable and maintain its existing size and positioning.
js path: 
CSS selector: 
image URL: