Docs

[highlandadventures]

hi…please see the attached image…what is the CSS to eliminate the lines / shadows of the tabs shown in http://www.machupicchu.com/inca-trail-tours/inca-trail-expedition-tour/ and make them look like the attached image…we want lines around the tab names as shown with background color different for selected (also line bottome gone for selected)…same effect as image…is it possible?

also, to control the padding or margin of the tab content to show the same as if the content was not part of a tab. on a cell phone, regular content shows much wider than content within tabs. it probably has to do with padding or margin for the tab section.

thanks, c

[Jade]

Hi there,

You can add this under Custom > CSS in the Customizer.

.x-tab-content {
    border: 0;
    box-shadow: none;
}

.x-nav-tabs>li.active {
    border-bottom: 0;
}

.x-tab-content .x-tab-pane {
    padding: 20px 50px;
}

Hope this helps.

[highlandadventures]

will also this remove the lines around the tab content (and shadow)? tks.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

ul.x-nav.x-nav-tabs,.x-tab-content {
    border: none;
    box-shadow: none;
}

li.x-nav-tabs-item.active {
    border-bottom: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd !important;
}
.x-nav-tabs>li {
    border-right: none;
}

Hope it helps.

[Author]

Posts