[Corinne JParticipant]

I have tried the fixes requested by others in the forum and nothing is getting rid of my borders as seen here:

http://03a2db5.netsolhost.com/wordpress2/services/

I’m attempting at getting my tab navigation to resemble this:

http://www.insperity.com/products/financial-solutions

[Nabeel AModerator]

Hey Corinne,

To remove the tab borders Add this code via Appearance > Customize > Custom > CSS:

.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

Let us know how this goes!

[Corinne JParticipant]

Hi! This removed the red color which was actually the only component that i liked… borders and shadow effect remain.

[RadModerator]

Hi Corinne,

How about this.

.x-tab-content {
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 0px !important;
}

And if you wish to remove tab navs border too, then use this.

.x-nav-tabs>li {
border: 0px !important;
}
.x-nav-tabs {
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 0px !important;
}

Hope these helps.

[Corinne JParticipant]

Awesome – I’m going to give these a try shortly. I’m kind of digging the last solution you provided, however. That said, one of my other challenges which is coming back in the tab nav that is elsewhere on the site is the gap created when using h tags. You can check it out with the dummy text placed here:

http://03a2db5.netsolhost.com/wordpress2/services/

How do we tighten up this space? So odd that it only occurs when using these and other style tags.

[RadModerator]

Hi Corinne,

You could add mtn to your head titles. This will remove large spacing above your text.

Eg. <h1 class="mtn"></h1>

Thanks!

[Corinne JParticipant]

<h1 class=”mtn”>Benefits</h1> removes my title altogether for some reason… leaves nav bar with ‘Make Sure to Set a Title’ after several attempts.

[RadModerator]

Hmm, that’s weird. Would you mind posting your shortcodes here.

Thank you.

[Corinne JParticipant]

Sorry… dumb question – how do I get to my short codes? Here is everything I have in my customizer css if that is what you mean?:

.wpcf7-form {
background:#cccccc;
border-radius:7px;
padding: 10px 20px;
margin-bottom:10px;
}
input[type=”radio”] {
margin-right: 2px;
margin-left: 8px;
}
label {
margin-left: -3px;
}

.x-topbar .p-info a {
border-bottom: none;
}

hr { display: block; height: 1px;
border: 0; border-top: 1px solid #000000;
margin: 1em 0; padding: 0; }

.entry-content {
margin-top: 2px;
}

.x-accordion-heading .x-accordion-toggle{
color:red; /*changes the color of the accordion heading*/
background-color: #000000!important;
}

.x-accordion-heading .x-accordion-toggle {
color:ffffff
}

.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

[ChristopherModerator]

Hi there,

The short codes are those one you add in posts or pages using visual composer.now if you click to view in classic mode you can see those codes.

Hop it helps.

[Corinne JParticipant]

Roger that:

[vc_row no_margin="true" padding_top="0px" padding_bottom="0px" border="none" inner_container="true"][vc_column width="1/1"][tab_nav type="four-up" float="none"][tab_nav_item active="true" title="
<h1 class="<code></code>mtn<code></code>">Benefits</h1>
"][tab_nav_item title="Compliance"][tab_nav_item title="Payroll"][tab_nav_item title="Training"][/tab_nav][tabs][tab active="true"]
<h4 style="color: #272727;">Total Benefits Management</h4>

<hr style="color: #7a7a7a;" />

<ul style="color: #7a7a7a;">
	<li>Benefit Plan Development</li>
	<li>Turn-Key Fringe Benefit Programs</li>
	<li>Open Enrollment</li>
	<li>Dedicated Employee Central Services</li>
	<li>Affordable Care Act Compliance</li>
	<li>ERISA Audits</li>
</ul>
[/tab][tab]
<h4 style="color: #272727;"><span style="text-decoration: underline;">The HR Audit</span></h4>

<hr style="color: #7a7a7a;" />

<ul style="color: #7a7a7a;">
	<li>Fair Labor Stadards Act (FLSA)</li>
	<li>Recordkeeping Requirements</li>
	<li>Unemployment</li>
	<li>Affordable Care Act</li>
	<li>Leaves of Absence and FMLA</li>
</ul>
[/tab][tab]
<h4 style="color: #272727;"><span style="text-decoration: underline;">The HR Audit</span></h4>

<hr style="color: #7a7a7a;" />

<ul style="color: #7a7a7a;">
	<li>Fair Labor Stadards Act (FLSA)</li>
	<li>Recordkeeping Requirements</li>
	<li>Unemployment</li>
	<li>Affordable Care Act</li>
	<li>Leaves of Absence and FMLA</li>
</ul>
[/tab][tab]
<h4 style="color: #272727;"><span style="text-decoration: underline;">The HR Audit</span></h4>

<hr style="color: #7a7a7a;" />

<ul style="color: #7a7a7a;">
	<li>Fair Labor Stadards Act (FLSA)</li>
	<li>Recordkeeping Requirements</li>
	<li>Unemployment</li>
	<li>Affordable Care Act</li>
	<li>Leaves of Absence and FMLA</li>
</ul>
[/tab][/tabs][/vc_column][/vc_row]

Only included the tab nav section… let me know if you would like the entire page code

[ChristopherModerator]

Hi there,

Would you please add the code below into Custom – > CSS section of Customizer:

.x-tab-content h4 { 
	margin-top: 0; 
}

This should get rid of the space of titles inside tabs.

Thank you.

[Corinne JParticipant]

I added the code into CSS / Customizer and updated the title of the first tab nav item with <h4 class=”mtn”>Services</h4> and still a no go. Tried <h4>Services</h4> (no class) and no go as well.

[ZeshanMember]

Hi Corinne,

Thank you for writing in!

I just checked your website and it seems that you are added mtn class along with the quotation marks (see: http://prntscr.com/4f2ge2).

To fix this simply remove the quotation marks from your class. The heading code should be like:

<h4 class="mtn">Services</h4>

Hope this helps. 🙂

Thank you.

[Corinne JParticipant]

fixed! thanks a bunch!

[Author]

Posts