Tab not working
-
Hi,
I am having difficulty with getting tabby to work:
http://www.smemedia.co.uk/tabstest/
I have tried disabling plugins, change theme etc…
Many Thanks,
Stephen
-
The plugin’s css is being overidden by something so you need a modified version.
Follow the instruction in the plugin’s faq to unhook the plugin’s stylesheet & add the tweaked version of the css below to your child theme if you’re using one or include it via a custom css plugin
.responsive-tabs-wrapper .responsive-tabs__heading { display: none; } .responsive-tabs-wrapper .responsive-tabs__list__item { display: inline; cursor:pointer; } @media (max-width: 767px) { .responsive-tabs-wrapper .responsive-tabs__list { display: none; } .responsive-tabs-wrapper .responsive-tabs__heading { display: block; cursor: pointer; } .responsive-tabs-wrapper .responsive-tabs__panel--closed-accordion-only { display: none; } } @media (min-width: 768px) { .responsive-tabs-wrapper .responsive-tabs__panel--closed-accordion-only { display: block; } } /* === Basic design === */ .responsive-tabs-wrapper { clear: both; margin-bottom: 20px; zoom: 1; } .responsive-tabs-wrapper:before, .responsive-tabs-wrapper:after { content: ""; display: table; } .responsive-tabs-wrapper:after { clear: both; } .responsive-tabs-wrapper .responsive-tabs__heading:focus, .responsive-tabs-wrapper .responsive-tabs__list__item:focus { outline: 1px solid transparent; } .responsive-tabs-wrapper .responsive-tabs__heading--active:focus, .responsive-tabs-wrapper .responsive-tabs__list__item--active:focus { outline: none; } .responsive-tabs-wrapper .responsive-tabs .responsive-tabs__list { font-size: 18px; margin: 20px 0 5px 0; padding-bottom:0; line-height: 1; } .responsive-tabs-wrapper .responsive-tabs__list__item { padding: 10px 20px 5px; margin: 0 14px 0 0; border: 1px solid transparent; } .responsive-tabs-wrapper .responsive-tabs__list__item:hover { color: #222; } .responsive-tabs-wrapper .responsive-tabs__list__item--active, .responsive-tabs-wrapper .responsive-tabs__list__item--active:hover { color: #606060; background: #fff; border: 1px solid #ddd; border-bottom-color: #fff; border-top-left-radius: 4px; border-top-right-radius: 4px; } .responsive-tabs-wrapper .responsive-tabs__panel { background: #fff; border: 1px solid #ddd; margin-bottom: 20px; padding: 20px 20px 0; } /* --- ACCORDION --- */ @media (max-width: 767px) { .responsive-tabs-wrapper { border-top: 1px solid #ddd; } .responsive-tabs-wrapper .responsive-tabs__heading { background: #fff; color: #909090; padding: 10px 0 10px 20px; border: 1px solid #ddd; border-top: none; font-size: 18px; margin: 0; position: relative; } .responsive-tabs-wrapper .responsive-tabs__heading:after { content:""; display: block; position: absolute; right: 20px; top: 20px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #444; } .responsive-tabs-wrapper .responsive-tabs__heading:hover { color: #606060; } .responsive-tabs-wrapper .responsive-tabs__heading--active, .responsive-tabs-wrapper .responsive-tabs__heading--active:hover { background: #e3e3e3; color: #606060; } .responsive-tabs-wrapper .responsive-tabs__heading--active:after { border-bottom: 6px solid #404040; border-top: 0; top: 18px; } .responsive-tabs-wrapper .responsive-tabs__panel { border-top: none; margin: 0; } }Dear Cubecolour,
I am so estatic seeing working tabs!! Thank you
As you can notice, there is arrows appearing left of each non-active tab.
Is this something easily amended?Many Thanks,
Stephen
It looks like this is a background image which appears due to the following rule in your theme’s stylesheet:
.post-entry ul li { background: url(images/bullet.png) no-repeat 0 7px; }so you can add the following rule to the css you added in the previous step to remove the background:
.post-entry .responsive-tabs-wrapper ul li { background: url(images/bullet.png) no-repeat 0 7px; }Also I just spotted some minor typos in the css I posted earlier which I have now corrected
Thank you once again, just one annoying niggle, now there is a line appearing between the active tabs heading and contents…
Is this something easily amended?
That’ll be the bottom padding on the tab list item.
So try changing this rule:
.responsive-tabs-wrapper .responsive-tabs__list__item { padding: 10px 20px 5px; }to:
.responsive-tabs-wrapper .responsive-tabs__list__item { padding: 10px 20px 4px; }I would just like to say a BIG Thank You!
Worked a treat 🙂
The topic ‘Tab not working’ is closed to new replies.