AJAX Products Tabs

Hello,

How to make this tabs look like this ??

I need to make a box around tabs but underlines.

I attache a screenshot here.

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.wd-nav-tabs>li {
border: 2px solid;
padding-left: 10px;
border-radius: 30px;
padding-right: 10px;
}

Best Regards

Hello,

Thank you for the code! That works!

I have another questions.

１.How to change the space size between tabs??

２.How to change the space size (Height) in the tabs??

３. How to change the color of box line.

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the URL of the website to check it myself and help you out accordingly.

Best Regards

Hello,

Here’s our details.

I’d like to make the tabs exactly same as this.

space between tabs, hight space in the box line, and when click the button, the tabs text and box line get black. ( other tabs text and box line color is light grey )

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.wd-nav-tabs>li:not(:last-child) {
    margin-inline-end: 8px;
}

.wd-nav-tabs>li.wd-active>a .nav-link-text:after {
display: none;
}

span.tab-label.nav-link-text {
    font-size: 12px;
}

Best Regards

Hello,

Thank you for the code! That works well and it’s perfect 😉

I really appreciate your support!

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts