CMS Development

tjohnson0122
Member

Hubspot's Vast tabber module

SOLVE

How to list the tabs in hubspot's tabber from vertical to horizontal. The current CSS code is:

<div class="tabber-wrap">
<ul class="clearfix tabber-tabs">
<li class="active"><a>{{ widget.tab_1 }}</a></li>
<li><a>{{ widget.tab_2 }}</a></li>
<li><a>{{ widget.tab_3 }}</a></li>
</ul>
<div class="tabber-content">
<div class="tab-pane active">{{ widget.tab_1_content }}</div>
<div class="tab-pane" id="tab-2">{{ widget.tab_2_content }}</div>
<div class="tab-pane" id="tab-3">{{ widget.tab_3_content }}</div>
</div>
</div>

0 Upvotes
1 Accepted solution
DaniellePeters
Solution
Top Contributor

Hubspot's Vast tabber module

SOLVE

Vast's stylesheet (called vast-style.css) has built in styles for the tabber module, which by default has the tabs sitting next to each other horizontally rather than vertically. 

 

If not using vast-style.css on your page, this can be achieved by adding the following to the stylesheet attached to your page:

.tabber-tabs > li {
    float: left;
}

View solution in original post

0 Upvotes
1 Reply 1
DaniellePeters
Solution
Top Contributor

Hubspot's Vast tabber module

SOLVE

Vast's stylesheet (called vast-style.css) has built in styles for the tabber module, which by default has the tabs sitting next to each other horizontally rather than vertically. 

 

If not using vast-style.css on your page, this can be achieved by adding the following to the stylesheet attached to your page:

.tabber-tabs > li {
    float: left;
}

0 Upvotes