Button to specific page and tab linking mobile breakpoint

Hi everyone!

I am trying to link the arrow buttons under our “Products and Services” section on the homepage → Products and Services page → open specific/corresponding tab.

It works perfectly fine on the widescreen, desktop, and tablet views (this design was created by me on Webflow). However, it doesn’t seem to be able to open the corresponding tab on the mobile breakpoint (the dropdown menu has been copied and pasted from a resource that someone has made). I have left the original design (used on widescreen, desktop, and tablet breakpoints) visible on the mobile breakpoint to show that it works perfectly fine on that tab design; however, it isn’t working on the dropdown menu design.

All the tabs in the dropdown menu have been classed correctly. What do you think might be the issue and solution? This is the last piece of the puzzle before I can fully publish the website, so any information or help would be useful :folded_hands:t2:

For reference, I have used this YouTube tutorial to link the buttons to the tabs: https://www.youtube.com/watch?v=4bGKzw649o0

Please let me know if you need any more information! Thank you!


Here is my staging link: Computec website
Here is my read-only link: Webflow - Computec website

Hi there,

When tab interactions aren’t working properly on mobile breakpoints, there are several common solutions you can try:

The first thing to check is that your tab triggers have sufficient tap targets for mobile devices. Make sure the clickable areas are at least 44x44 pixels to comply with mobile accessibility standards. You can adjust this in the Style panel for your tab triggers.

Also verify that your tab interactions are properly set up across all breakpoints. Sometimes interactions can become disconnected when creating responsive layouts. Double-check your interaction settings in the Interactions panel, ensuring they’re consistent across all device views.

If you’re using custom animations with your tabs, try temporarily disabling them to see if that resolves the issue. Mobile devices can sometimes handle complex animations differently than desktop browsers.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

Still not working :(

(post deleted by author)

Hey @Shyong ,

Can you change the code you got from the YouTube tutorial that you linked to the following and check if the buttons on the homepage affect the dropdown tab element as well?

<script>
var Webflow = Webflow || [];
Webflow.push(function () {
  var tabName = getParam('tab');
  if (!tabName) return;

  $('.' + tabName).trigger('click');

  function getParam(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
});
</script>

After replacing the code, publish the site and check the results. Hope this helps.