Vertical Navigation In Tabs does Not Work
Alex
For instance, there are tabs on a specific page, and in the settings, I select the option to place the navigation at the top. However, for some reason, it doesn't switch; the navigation remains on the side. Why is that, and how can I fix it?https://yadi.sk/d/xU1_uGFo9k0Agg
Here is an example of the specific page: https://besedka-dacha.ru/derevyannyj-tualet/tualet-standart I need the tabs to switch at the top.https://yadi.sk/d/r0XiHD8i01ySDg
The documentation for the tabs component states that the navigation can be switched to the top, but I haven't been able to get that to work. I can provide access to the site if needed.
Toufiq
Accepted Answer1.I didn't add the code as a separate file, but entered it into the Custom CSS template settings field. If I update the template in the future, will this code be deleted?
I recommend adding your custom CSS rules to the custom.css file. This keeps your changes separate from the core template files and ensures they won't be overwritten during future updates.
2.Will you fix this tab issue with the next SPPB update? Will these settings (custom code) conflict in the future?
This is not an SP Page Builder issue. Since this is related to the template's design and styling, the appropriate approach is to override the CSS.
Toufiq
Accepted AnswerHi there,
Thank you for reaching out, and I apologize for any inconvenience caused by this oversight. Add this css code inside the custom.css file.
.sppb-addon-tab .sppb-tab .sppb-nav li {
float: none;
width: auto;
}
.sppb-addon-tab .sppb-tab .sppb-nav {
float: none;
}Best regards,
Toufiqur Rahman (Team Lead, Support)
Alex
Accepted Answerhttps://yadi.sk/i/oT4zFNbQRG_EXg Did I specify the location correctly? Edit in the template styles.
Alex
Accepted AnswerI inserted this code in the template settings. The tabs are at the top, but there are a couple of notes:
- The indents in the tab names are not uniform and there is no way to change them in the standard settings. Is there any way to fix this?
- Why does the tab component itself turn out to be cut off in both the mobile and desktop versions? There is an empty space on the right. It's not pretty. I was unable to remove it in the SPPB constructor. How can I fix this?https://yadi.sk/i/c5NVBn4g_wU7HQ https://yadi.sk/d/X8_36gWy_Zgf2g
Alex
Accepted AnswerExcellent, exactly what I needed. However, the tab titles are slightly misaligned (the indents in the titles are uneven). I'd also like to clarify a couple of things:
- I didn't add the code as a separate file, but entered it into the Custom CSS template settings field. If I update the template in the future, will this code be deleted?
- Will you fix this tab issue with the next SPPB update? Will these settings (custom code) conflict in the future?
Alex
Accepted AnswerToufiq Thanks. I have no questions about this site for now.
Toufiq
Accepted AnswerYou are most welcome! We appreciate your feedback and are delighted to hear that you're satisfied with our service.
To officially close this forum post, mark it as accepted. If you have any more questions or need further assistance in the future, please don't hesitate to reach out to us.
As for writing a review about our product and support quality, we would greatly appreciate it! Your feedback helps us improve and serves as a valuable reference for others. Please take a moment to share your thoughts about your experience with our product and the support you received. Your input is valuable to us and the community. Thank you in advance for your time and support.
We're here to assist you with any further questions or requests you may have. Once again, thank you for choosing our product and for being a part of our community.
Best regards,
Toufiqur Rahman
Team Lead, Tech Support (JoomShaper)