Solved SP Page Builder

Vertical navigation in tabs does not work

Asked by Alex 2 months ago Last activity 1 month ago

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.

Accepted answer

Marked as the solution

Toufiq Senior Staff

2 months ago

1.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.

6 more replies

Toufiq Senior Staff

2 months ago

Hi 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)

John Mendivel

1 month ago

I almost opened a ticket, but seeing this solves my problem too. It would be great if they could fix this in the next update. Thanks.

Toufiq Senior Staff

1 month ago

Our team member will help your forum post. Thanks

Alex Asked this

2 months ago

Toufiq It’s not entirely clear which way? please indicate the exact path?

Alex Asked this

2 months ago

https://yadi.sk/i/oT4zFNbQRG_EXg Did I specify the location correctly? Edit in the template styles.

Toufiq Senior Staff

2 months ago

You can put here or create a custom.css file on this file location.

templates/your_template/css/custom.css

Alex Asked this

2 months ago

I 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

Toufiq Senior Staff

2 months ago

Add this css code inside the custom.css file.

.sppb-addon-tab .sppb-tab .sppb-tab-content {
    float: left;
    width: 100%;
    border-color: #ebebeb;
    border-top: 1px solid #ebebeb;
    padding: 25px 25px 50px;
}

Alex Asked this

2 months ago

Excellent, 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 Asked this

2 months ago

Toufiq Thanks. I have no questions about this site for now.

Toufiq Senior Staff

2 months ago

You 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.

Joomla Extension Directory

TrustPilot

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)