Customise Tab Asset Navigation

[George]

Hey Guys,

I would like to customise my tab asset navigation section.

I’ve attach two images below, one is the current set up and one is the desired look.

I want this to make my pages more minimal, easier to navigate and cleaner.

Basically the changes are as follows:

– Remove boxed border around each tab heading
– Change the colour of headings to black (site-wide my hyperlinks are red, however, I want the tab section to be black, but keep my site-wide hyperlinks as red, can that be done?)
– Underline the activate tab and keep the inactive tabs not underlined.

Additionally, it would be cool to do it site-wide or to target individual posts.

Can you guys please help? I’m not sure if this should be requested for a feature or not.

You’ve made these customisations for me before on my previous Flexform theme, however they’re not remotely close to what’s required within cardinal.

Many thanks and I look forward to hearing from you.

– George

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Try adding this to your custom css:

.spb_tabs .nav-tabs li a {
border: none;
}
.spb_tabs .nav-tabs li.active a {
border-bottom: 1px solid;
}

– Kyle

[George]

Hi Kyle,

That did work, thank you!

In addition to the above, can you change the tab headings to black/bold?

You can see the tabs in action here;

https://events.com.au/french-open-travel-packages/

When clicking on a tab, the border appears for a second and then disappears, is this fixable?

Thank you kyle.

– George

[George]

Hi Kyle,

Can we also make the tab heading area transparent?

It looks very funny!

See attached image.

Thank you.

– George

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Try this:

.spb_tabs .nav-tabs li a {
border: none!important;
}
.spb_tabs .nav-tabs li.active a {
border-bottom: 1px solid!important;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  background: transparent!important;
}

– Kyle

[George]

Hi Kyle,

Thank you.

The transparency is now working and the borders are gone when blicking.

Can you please code me up for making the tabs black and active tab bold?

Thank you very much!

– George

[Kyle – SUPPORT]

Change the above to:

.spb_tabs .nav-tabs li a {
border: none!important;
color:#000000!important;
}
.spb_tabs .nav-tabs li.active a {
border-bottom: 1px solid!important;
font-weight:bold;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  background: transparent!important;
}

– Kyle

[George]

Hi kyle,

Your a legend, thank you.

– George

[Kyle – SUPPORT]

No problem 🙂

– Kyle