Cannot get more than 1 tab showing

Hi

I’ve got them now working but they are NOT side by side. Each tab is underneath each other which is NOT what I want. I know this usually defaults to TABS across the screen from left to right.

How can I fix this ?

Thanks
Kristin

Hi Kristin,

Can you send us the URL to your site and we can check it out?

The most likely thing is that your theme is changing the front-end layout of the tabs and is not set up to handle multiple custom tabs. We’ll see what we can do to fix this.

Thank you,
Kevin.

Hi

It is on my local site (wamp) so cannot send a link still in design stage.

My theme is Storefront.

I have it working on another shopping cart site but using a different theme on that site and no issues on that one.

Must be some coding somewhere possibly ?
Is there some CSS that I can use to make the tabs beside each other is the easiest thing that I can think of !

Thanks
Kristin

I’ve downloaded the Storefront theme to see the tab layout and it is as you describe. However, I’m not seeing any template files so I think the Storefront theme is changing the layout purely via CSS. I’m trying to find out how to override it now.

Cheers,
Kevin.

It isn’t perfect but try this CSS and let me know if that’s a good start:

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
}

.woocommerce-tabs ul.tabs li {
	display: inline-block;
	margin-right: 10px;
	border: none;
}

.tabs.wc-tabs {
    float: none;
}

.woocommerce-tabs .wc-tab {
    float: none;
}

That last CSS missed some things. Here’s a more complete solution:

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
}

.woocommerce-tabs ul.tabs li {
	display: inline-block;
	margin-right: 10px;
	border: none;
}

.tabs.wc-tabs {
    width: auto !important;
}

.woocommerce-tabs .wc-tab {
    float: none;
}

.woocommerce-tabs ul.tabs li:after {
    display: none !important;
}

.tabs.wc-tabs a:focus {
    outline: none;
}

HI

Wow thanks heaps !!

That worked a treat .. Solved my issue. So it was the coding in the Storefront theme. I was looking in the CSS coding via Inspector and couldn’t find the right coding to change.

Thanks very much

Regards

Kristin