8 Tabs

Extend the tabs from 5 to more than 5 – in this case 8 tabs with transparent background:


SHORTCODE:

[x_tab_nav type="eight-up"]
[x_tab_nav_item title="Tab 1" active="true"]
[x_tab_nav_item title="Tab 2"]
[x_tab_nav_item title="Tab 3"]
[x_tab_nav_item title="Tab 4"]
[x_tab_nav_item title="Tab 5"]
[x_tab_nav_item title="Tab 6"]
[x_tab_nav_item title="Tab 7"]
[x_tab_nav_item title="Tab 8"]
[/x_tab_nav]
[x_tabs]
[x_tab active="true"] Your Content 1 [/x_tab]
[x_tab] Your Content 2 [/x_tab]
[x_tab] Your Content 3 [/x_tab]
[x_tab] Your Content 4 [/x_tab]
[x_tab] Your Content 5 [/x_tab]
[x_tab] Your Content 6 [/x_tab]
[x_tab] Your Content 7 [/x_tab]
[x_tab] Your Content 8 [/x_tab]
[/x_tabs]

CSS:
Notice that to set widths for 8 tabs, you use the equation 100% / 8 = 12.5%

/* Tabs Experiment
   ================================================== */

.x-nav-tabs, .x-nav-tabs > li {
	border: none;
}

/* Active Tab Menu
   ================================================== */

.x-nav-tabs > .active > a {
	font-size: 20px;
	font-weight:bold;
	-webkit-box-shadow: none;
	box-shadow: none;
	background: #fff;
	color: #000;
}

.x-nav-tabs > .active > a:hover {
	color: #333;
}

/* Inactive Tab Menus
   ================================================== */

.x-nav-tabs > li > a {
	font-size: 20px;
	font-weight:bold;
	background: #fff;
	color: 333;
	border-bottom: 1px solid #999 !important;
}

.x-nav-tabs > li > a:hover {
	background: transparent;
	color: #000;
	cursor:pointer;
	border-bottom: 3px solid #1BBC9B !important;
}

/* Add Transparent Tab Content Background
   ================================================== */

.x-tab-content {
	border: none;
	background: transparent;
}

.x-nav-tabs, .x-nav-tabs > li, .x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover, .x-tab-content, .x-tab-content {
	box-shadow: none;
	border: none;
}

.x-nav-tabs > li > a {
	background: transparent;
	max-width: 285px;
	margin: 0 auto;
}

.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
	box-shadow: none !important;
    border-bottom: 3px solid #1BBC9B !important;
}

/* Extend to 8 Tabs
   ================================================== */

.x-nav-tabs.eight-up > li {
    width: 12.5%;
}
.x-nav-tabs.eight-up>li>a{
font-size:1.5rem;
}

/* Mobile
   ================================================== */

@media (min-width:767px){
.x-nav-tabs.eight-up > li {
    width: 12.5%;
}
}
@media (max-width:767px){
.x-nav-tabs.eight-up > li {
    width: 100%;
float:none;
}
}

RESULT:

Your Content 1
Your Content 2
Your Content 3
Your Content 4
Your Content 5
Your Content 6
Your Content 7
Your Content 8

DEMO: