I will share some code to add Elfsight Countdown Timer widget (affiliate link) or this link (non-affiliate link) to Navigation Bar
A. Before following these steps, first you need to add Elfsight Countdown Timer code to Website Tools (under Not Linked) > Code Injection > Footer
B. Add Countdown Timer to Nav Bar
All code should add under Elfsight Code
Position 1. Before Navigation Bar
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(function(){
$('.eapps-countdown-timer').appendTo('nav.header-nav-list');
},5000);
});
</script>
<style>
nav.header-nav-list {
flex-wrap: nowrap;
align-items: center;
}
nav.header-nav-list>div[class*="elfsight"] {
padding: 0px !important;
}
</style>
Position 2. After Navigation Bar
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(function(){
$('.eapps-countdown-timer').insertAfter('nav.header-nav-list>div.header-nav-item:last-child');
},5000);
});
</script>
<style>
nav.header-nav-list {
flex-wrap: nowrap;
align-items: center;
}
nav.header-nav-list>div[class*="elfsight"] {
padding: 0px !important;
}
</style>
If you have any problems, you can comment below.
Because Squarespace Header has many layout types, each layout creates a different code structure, so it is difficult to write pre-written code for other positions.
If you need to add Countdown to other locations, just send the site url + tell me the location you want to insert, I will give you the code.
