Tabby Responsive – Tabs not displaying horizontally

Try using the WordPress Health Check & Troubleshooting plugin to investigate whether another plugin is causing a conflict which prevents the tabby javascript from working.

I appreciate the response. How am I supposed to check the above please?

The health check and troubleshooting plugin has a troubleshooting mode that allows you to see your site with no plugins active. Activate tabby responsive tabs to see whether it works at that point, and if so activate the other plugins one by one, checking each time to see whether one in particular caused the problem.

Hi @numeeja
I enabled troubleshooting mode & all plugins were disabled for troubleshooting. First thing I enabled the Tabby plugin and it does not work like it should. It is displaying the page the same way as it was when I described it to you. The headings are vertically stacked on the top and each heading then opens up below vertically in a very non-intuitive way & unlike clean horizontal tabs.
Could you please help me with fixing this please? It is very important for this site I am building for my dad & have less time to finish.

Thanks!

It looks like the tabby.css stylesheet is not loading.

In the WordPress admin go to settings -> tabby

Is the ‘Include the default tabby stylesheet’ checkbox checked? If not, select it and click [save changes] to include the stylesheet.

Hey @numeeja
I really appreciate the promptness & accuracy of your response. The tab display issue is fixed. However, the text of the tab has an entirely white background with white text which makes nothing visible. That is different from the preview, which shows a nice black background with white text for a selected tab text & that is exactly how I want it to look.
Can you please help navigate that issue for me please? I really need it & very grateful for your time!

Regards,
DCP

• This reply was modified 2 years, 9 months ago by Debesh.

tabby responsive tabs does not apply any styles to anything within the tab content area. As your body text is white that is what is displaying on the white background of the tab content area.

To change this you will need to add some custom CSS rules to target the text inside the tab content, for example:

.tabcontent {
	color: #252E3E;
}

You can add this to your theme if you are using a custom or child theme, or you can add it to the Additional CSS panel of the WordPress customizer at appearance -> customize -> Additional CSS

Hi @numeeja
Appreciate the response. I do want to keep the text inside the tab area white. What I want to change is the background, as it shows in the preview –> I want the background to be black
Kindly help

Regards
D

This would require the tabs to use a custom set of styles. There are a couple of options available to achieve this:

1. Uncheck the option to include the default stylesheet, and copy the css rules from the tabby.css stylesheet in the plugin into your child theme’s stylesheet or the additional css section of the WordPress customizer, then edit the css as required there.

2. Alternatively use the optional Tabby responsive tabs customiser add-on to customise the tab design without needing to do any code editing.

Hi @numeeja

Could you please help me with what CSS edits will I need to perform in appearance -> customize -> Additional CSS?
Also, I just went ahead and enabled the default tabby.css stylesheet for the plugin to work properly right?

Request to kindly help with the above please, shall be highly obliged!

Thanks
Sabya

Yes the option when checked enqueues the stylesheet. If you want to customise the stylesheet you need to copy the styles into your theme or additional css panel where they can be edited, and uncheck the option to prevent the original stylesheet from loading.

I am happy to give up my time to provide support here to get the plugin working as it is designed, however any customisation is beyond the scope of the free support I am able to provide.