Timestamp Code Feature -- Header Positioning Help!

Hey all!

I've been workshopping this timestamp code that I had my chatgpt write for me (lol) and its so close to being perfect but I can't figure out this one issue: I want the positioning of the stamps to be inline on the right hand corner of the header, inline with the top of the hamburger menu. I have attached a photo of what it looks like now

Here's the code I'm using:

Header Code Injection:

<!-- Timestamps -->

<div id="new-york-timestamp" class="timestamp">NY: <span></span></div>
<div id="los-angeles-timestamp" class="timestamp">LA: <span></span></div>
<div id="paris-timestamp" class="timestamp">PAR: <span></span></div>

<script>
function updateTime(timezone, elementId) {
  var now = new Date();
  var options = { timeZone: timezone, hour12: true, hour: 'numeric', minute: 'numeric'};
  var timeString = now.toLocaleString('en-US', options);
  document.getElementById(elementId).querySelector('span').innerText = timeString;
}

// Update time for New York every second
setInterval(function() {
  updateTime('America/New_York', 'new-york-timestamp');
}, 1000);

// Update time for Los Angeles every second
setInterval(function() {
  updateTime('America/Los_Angeles', 'los-angeles-timestamp');
}, 1000);

// Update time for Paris every second
setInterval(function() {
  updateTime('Europe/Paris', 'paris-timestamp');
}, 1000);
</script>

CSS:

// Timestamps//
.timestamp {
    position: relative; 
    background-color: transparent;
    color: @charcoal; 
    padding: 0vh 3vw;
    border-radius: 0px;
    font-size: .9em;
    font-family: 'twk300' !important;
    font-weight: 500 !important;
    z-index: 1500; 
    display: inline-block; 
}

#los-angeles-timestamp {
    margin-right: -10px; /* Adds spacing between timestamps */
}

#new-york-timestamp {
    margin-right: -10px; /* Adds spacing between timestamps */
}

#paris-timestamp {
    margin-right: -10px; /* Adds spacing between timestamps */
}

/* For screens smaller than 768px (typical mobile devices) */
@media (max-width: 767px) {
    .timestamp {
        display: none; 
    }
}
//end//
 

Website: https://sheep-plane-zgpj.squarespace.com/

Password: standout

Thanks yall! 

L

It think it is fine now

hey @tuanphan! yes its almost there! however still struggling to get the timestamps to align centered with the middle of the hamburger or even top alignment with hamburger

I think centered would look best, trying to use vh to push it down but its not moving 😞 any ideas?

You mean add timestamp in this position?