Horizontal Mobile Menu

Replicate Scrollable Horizontal Nav, Link Centres On Click With Webflow Tabs?

Goal: Replicate this horizontal mobile menu (site:Women's Designer Coats | Moda Operandi) using the Webflow tabs element.

So far: I’ve found this Stack Overflow thread which is close to what I need – however the exact structure doesn’t seem to be replicable with tabs.

I’m wondering if A) this is even replicable with ‘Tabs’ and B) if it is, how?

Other notes: Each Tab will contain 2 slick sliders that are synched together. Previously I was able to get the “Tab Menu” [class =".tabs-menu-2-copy-2.tabs-menu-mobile" ]to translate along the x-axis but this moves the div across the page instead of scrolling its contents (the tab links) it also seemed to disrupt the functionality and styling of the slick slider in “Tab 1” so I removed it from the custom code before the </body> tag, however the script was this :grimacing::

$(document).ready(function () {
var scrollTo = 0;
$('body').on('click', "a", function () {
    var activeItem = $('a.w--current');
    var selectedItem = $(this).parent()

    var activeIndex = $('a').index(activeItem);
    var selectedIndex = $('a').index(selectedItem);

    scrollTo =- selectedItem.position().left + $('.tabs-2.w-tabs').width() / 2 - selectedItem.width() / 2;

        $('.tabs-menu-2-copy-2.tabs-menu-mobile.w-tab-menu').css('transform', 'translateX(' + scrollTo + 'px)');

Read only:

Published Link:

CC: @sabanna → Thought I’d tag you since you’ve been very helpful, I’d really appreciate your thoughts/help if possible :slight_smile: