[George HParticipant]

Hello,

I want to know if it’s possible to and if so, how would i go about, making the tabs section transparent. Either the tabs or the tab nav sections.

An example of what i’m talking about can be seen on the virginamerica beta website: https://www.virginamerica.com/cms/fly-with-us the ‘Food & Drinks’ section is fantastic and want to know if i can achieve that type of look with theme X.

Many thanks in advance.

George

[RadModerator]

Hi George,

Thank you for writing in! Do you mean the “Cabin” tabs? Yes it is possible.

You could setup your site and I will help you with that styling.

Let me know.

[George HParticipant]

Hi,

What do you mean by “Cabin” tabs, if it’s the tabs with no borders that you can see on the Virgin America website then yes, that’s what i’m looking for.

I can provide you with my site login, does that help? My site is currently in maintenance mode. So to see everything, you’ll need to login.

Regards, George

[RadModerator]

Hi George,

Sure, you could provide it in private and just let me know which tab at your site. Or should be global styling?

Let me know.

[George HParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi George,

Thank you for providing the login details. I have just added the CSS code to remove the borders around the tabs of that particular page you mentioned.

The add CSS code:

/* Styling Added to remove Tabs border */

.page-id-2110 .x-nav-tabs,
.page-id-2110 .x-tab-content {
   border: none !important;
}

This code can be found on Customizer > Custom > CSS.

I hope this helps. If you still face any issue, just let me know, I’d love to help 🙂

Thank you.

[George HParticipant]

Hi Support,

Thank you for that. It works perfectly!

With the same particular tabs area on that page.

Can I/we make the tab nav area have;

– no borders, exactly the same as you’ve done so far.
– the active tab heading underlined? the same affect as the top menu nav? The underlined area changes depending on which active area is open.
– the tab nav items all centered. So if there was one tab nav area, it would be centered?

Let me know if those are possible and what css I can add.

I should be able to target them as you have done in my custom css area.

Many thanks in advance. This theme is hands down the best i’ve ever worked with.

– George

[ZeshanMember]

Hi George,

Thanks for dropping by!

Yes, that is possible with CSS. Please add the following to Customizer > Custom > CSS:

.page-id-2110 .x-nav-tabs {
	text-align: center;
}

.page-id-2110 .x-nav-tabs > li {
	float: none;
	text-align: center;
	display: inline-block;
	width: auto !important;
}

.page-id-2110 .x-nav-tabs > .active > a {
	text-decoration: underline;
	padding: 0.75em 1em 0.95em;
}

You can remove “.page-id-2110” from each CSS rule, if you want this nav tabs styling for the entire website.

I hope this helps. If you have any other question, just let us know. We’ll be happy to answer 🙂

Thank you.

[George HParticipant]

Thank you very much. That works perfectly!

the final thing.

for page-id-2110 whats the code to remove my blue background colour? Just for that page though?

Thank you very much

George

[RadModerator]

Hi George,

Great to hear that!

But I can’t find the blue background, have you done it?

Let me know.

[George HParticipant]

yeah, i made my own that applies to all tabs, but i want to remove it for the tab on page 2110, that you helped me create.

this is the code i’ve used for the background.

.x-nav-tabs > li > a, .x-nav-tabs > li > a:hover {
background-color: #a0d0e5;
color:#000000;
}

George

[ZeshanMember]

Hi George,

Thank you for writing in!

Please add the following CSS code to target every page exact “page 2110”:

body:not(.page-id-2110) .x-nav-tabs > li > a, 
body:not(.page-id-2110) .x-nav-tabs > li > a:hover {
   background-color: #a0d0e5;
   color:#000000;
}

Hope this helps.

Thank you.

[Author]

Posts