Horizontal Scrolling Tabs in Bricks

Nestable Tabs element in Bricks wraps into multiple lines out of the box at smaller viewport widths.

This Pro tutorial provides the steps to remove this wrapping, prevent shrinking and make the tabs overflow so they can be scrolled horizontally.

Step 1

Add a Tabs (Nestable) element in a Section’s Container in your Bricks Page/Template.

Wrap it in a Block.

Add a class of tabs-wrapper to this Block at STYLE → CSS.

Step 2

Add this in your child theme‘s style.css or a code snippets plugin:

.brxe-tabs-nested .tab-title {
  flex-shrink: 0;
}

.tab-menu {
  overflow-x: auto;
}

.tabs-wrapper {
  position: relative;
}

.tabs-wrapper::after {
  background-image: linear-gradient(90deg, transparent, #eee);
  width: 60px;
  height: 68px;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: -1;
  content: "";
}

@media (max-width: 767px) {
  .tab-menu {
    flex-wrap: nowrap;
  }
}

If you have the tabs wrapper in a dark background, replace

background-image: linear-gradient(90deg, transparent, #eee);

with

background-image: linear-gradient(90deg,rgba(15,15,43,0),#16161a);