Troubleshooting Tab Auto-Change Issue in Webflow Header 103

Hi everyone, I'm using Header 103 (preview link) in a Webflow project for a client (live site). However, I'm experiencing an issue where the tabs should auto-change after a few seconds as the progress bar fills up—but this doesn't always happen consistently. What's strange is that it seems to work fine in a private browser, so I'm unsure what might be causing the inconsistency. Since I come from a design background and don't have a strong coding knowledge, I’m not entirely sure how to troubleshoot or fix this. If anyone has insights or can point me in the right direction, I’d really appreciate it! Thanks in advance!

3 comments

Ross C.
·
Here is the read only link: https://preview.webflow.com/preview/eztekglobal?utm_medium=preview_link&utm_source=des[…]23d14b27e916804588083add897c107e&locale=en&workflow=preview
Christian S.
·
Having the same issue, happens on mobile on Chrome for me, on Safari the auto change works fine. When I click on one it starts working, but after reloading the page and not clicking, it doesn't work.
Christian S.
·
changed the code with chatgpt to this, it works now for me: <script> var Webflow = Webflow || []; Webflow.push(function() { var tabTimeout; var lastTabClickTime = 0; $(document).ready(function() { clearTimeout(tabTimeout); // Clear any previous timeouts // Ensure the first tab is active if none is set as "current" if (!$('.header103_tab-link.w--current').length) { $('.header103_tab-link:first').addClass('w--current'); // Add 'current' class to the first tab } tabLoop(); // Start the tab loop // Add click listener to tab links $('.header103_tab-link').click(function() { lastTabClickTime = Date.now(); clearTimeout(tabTimeout); tabTimeout = setTimeout(tabLoop, 6000); // Restart loop after interaction }); }); function tabLoop() { tabTimeout = setTimeout(function() { // Ensure navbar is closed or tabs menu exists, and enough time has elapsed since the last interaction if (($('.w-nav-menu').length === 0 || !$('.w-nav-button').hasClass('w--open')) && ($('.header103_tabs-menu').length && Date.now() - lastTabClickTime >= 6000)) { var $next = $('.header103_tabs-menu').children('.w--current:first').next(); if ($next.length) { $next.click(); } else { $('.header103_tab-link:first').click(); } } // Recursively call tabLoop tabLoop(); }, 6000); // 6-second delay } }); </script>