Hi, I’m using the Tabs element and I’d like them all to be closed to begin with and only to open when they’re clicked on. I can’t figure out how to do this! On the classic version, there was something to select as to whether or not you wanted the first tab to be active or not.
The website is https://www.core365.co.uk/ and the tabs are on the home page, at the very bottom just above the footer.
Thanks!
Hi @core365,
Thank you for reaching out to us. Unfortunately it’s not possible with the Tabs element currently but you can do this with Classic Tabs element. Simply inspect your Tab and turn off the Initial Active Tab option to have closed tabs at the start.
Hope this helps!
Hi @nabeel,
That’s strange that the Initial Active Tab option wasn’t included on the latest Tabs element, as that was one of the most useful things in the Classic version!
Also, I’ve tried to recreate the Classic Tabs to match as close as possible to match the latest Tabs element, as I had it looking exactly how I wanted it, however the Classic Tab buttons with the headings in aren’t the same width and there’s a white gap under the ‘Organic SEO’ button and when you hover over a tab button, a white line appears under it and I don’t know how to get rid of it!
I’ve set up a temp page with the Classic Tabs above the latest Tabs element so you can see how I’d like the Classic Tabs buttons to look if possible. I’ll put the URL in a secure note.
Thank you!
Hello @core365,
You may apply some workaround for now if you want to use the v2 tab element. Please add a class to the tab elements you do not want to have an opened tab then add this code in X > Theme Options > JS:
(function($){
$(window).bind('load', function () {
$('.no-active-tab .x-tabs-panels .x-tabs-panel, .no-active-tab .x-tabs-list button').removeClass('x-active');
$('.no-active-tab .x-tabs-list button').attr('aria-selected', 'false');
});
})(jQuery);
The code above assumes that the class you have added to the tab elements is no-active-tab.
Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.
Hope this helps.
Hi, many thanks for that! I’ve done what you said, however when you click on the first tab ‘Web Design & Digital Marketing Advice’, nothing happens, it doesn’t open. You have to click on a different tab such as ‘Digital Marketing Strategy’ and then go back to the first tab for it to open.
Thanks!
Hi @core365,
Yup, that Initial Active Tab option should be on the v2 tab, I’ve submitted this to our issue tracker so the developers will be made aware of it.
Unfortunately, we can’t provide a quick fix for this, please keep the first tab open for now.
Thanks,
Hi @friech,
Ok, that would be great if it could be added!
I’ve tried to recreate the Classic Tabs to match as close as possible to match the latest Tabs element, as I had it looking exactly how I wanted it, however the Classic Tab buttons with the headings in aren’t the same width and there’s a white gap under the ‘Organic SEO’ button and when you hover over a tab button, a white line appears under it and I don’t know how to get rid of it!
I’ve set up a temp page with the Classic Tabs above the latest Tabs element so you can see how I’d like the Classic Tabs buttons to look if possible. I’ll put the URL in a secure note.
Thank you!
Hi @core365
Custom CSS can be used to adjust it. Please check the following guide on how to inspect element CSS:
See this sample please: https://screencast-o-matic.com/watch/cYfeoN474x
Hope this helps.
Hi @lely,
Thanks, but I’ve already tried to do it myself and can’t get it right, which is why I’ve contacted yourselves! You can see I’ve already styled it as much as I can, I just need a bit of help with finishing it off.
Thanks
Hello @core365,
I can see that you have added this custom css:
.x-nav-tabs>li>a {
font-family: "fatfrank",sans-serif;
font-size: 1.85em;
font-style: normal;
font-weight: 400;
line-height: 1;
text-transform: uppercase;
color: #5b5f61;
background-color: #e6e6e6;
padding: 1em;
}
Please have it updated and add a minimum height min-height: 104px; of the nav tab links so that they will have a uniform heights.
Just to manage your expectations, this isn’t specifically a theme issue, but rather, your customisation of it. So whilst I have happily provided you with some guidance above on how to get it working, we cannot provide theme customisation as a general rule, or support custom code solutions provided. Therefore, you might find it helpful to check out the following:
https://www.w3schools.com/cssref/css_selectors.asp
https://www.youtube.com/watch?v=GMk7ZLuo6Po
Best Regards.
Hi, I’ve added in the minimum height but this only works when you view it on a desktop, when you view it on a smaller screen size, a white gap appears under the tabs and looks stepped. I’ve included a screen grab below for your reference.
Also, I’ve tried to vertical align the text but any CSS I’ve tried to use doesn’t work!
Thanks
Instead of setting a min-height to the elements, try setting the display of the nav tabs to flex like this:
.x-nav-tabs.top {
display: flex;
}
Then set the height of the <a> links’ height to 100% like this:
.x-nav-tabs.top>li a {
height: 100%;
display: block;
}
Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.
Hope this helps your get started.
Hi @jade,
That’s great, thank you!
I’ve tried to get the text vertically aligned in the middle, but whatever I do I can’t seem to get the CSS correct. I’d really appreciate it if you’d be able to help me out with this too please!
Thanks!
Hi @core365,
The Individual Tabs is powered by Flexbox, you should achieve what you need with a few tweaks (given your other custom CSS on tabs will not interfere)
First, turn Off the Fill Space option and set the Justify Content to Space-Between
Then, set the min-width and max-width to calc(25% - 2px), so all your tabs will have an equal width (100% / 4tabs = 25%) the minus 2px is the space-between the tabs, feel free to adjust that.
Then add this to the Tab’s Element CSS area so the tabs titles can be wrapped.
$el .x-tabs-list button {
white-space: normal;
}
Tab titles are vertical-align: middle; by default so there is no need for CSS to that.
Hope it helps,
Cheers!
Hi @friech,
Thanks, however it’s the ‘Classic Tabs’ I’m using, as I needed the tabs to not have any initial tabs active and the latest Tabs element doesn’t have that option. The ‘Classic Tabs’ are above the latest Tabs element, as I’d already set that up and styled the latest Tabs as to how I wanted them to look and that’s when I initially contacted yourselves as I didn’t want to have any initial tabs active. That’s when I was told I needed to use Classic Tabs, so I’ve done that and kept the latest Tabs below it as reference, however the tab titles aren’t centred vertically and I’ve tried to sort it out myself with CSS, but nothing works!
Is it possible to do?
Thanks!
Hey @core365,
Yes this is possible with custom CSS, please add the following code as well:
.x-nav-tabs.top>li.x-nav-tabs-item a {
display: flex;
align-items: center;
justify-content: center;
}
Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:
Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!
Hi @nabeel,
That’s perfect, thank you!
I really appreciate all the time and help spent on this.
Thanks!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.