The problem of displaying many tabs on mobile phones

Feature Requests / Improvements
1

Hi bricks team.

When the number of tabs is large, the tabs are placed on top of each other in mobile and this is very uncomfortable. Just like the bricks website, there is this problem.

tabs

To solve this issue, please add the ability to enable vertical scrolling so that if the number of tabs is high, the tabs will not overlap each other. but can be scrolled horizontally. This is a feature that Elementor added in its latest version.

2

Hey @jolia,

thanks for your report.

This is not a bug though but a feature / improvement request. I’ve moved the thread accordingly.

In the meantime you can easily achieve this with some custom CSS. An example for the Tabs (Nestable) element would be the following custom element CSS:

root .tab-menu {
  flex-wrap: nowrap;
  overflow-x: auto;
}

root .tab-title {
  flex: 0 0 max-content;
}

/* Optionally hide the scrollbar */
root .tab-menu::-webkit-scrollbar {
  display: none;
}

CleanShot 2023-06-29 at 07.54.50

Best,

André

2 Likes