[masterssonParticipant]

Is there a way on X theme to add bootstrap tags like this one: Bootstrap Line tab snippet

i would also need them to be placed just under a Slider element. Something like the screenshot that I have attached.

[Nabeel AModerator]

Hi there,

Thanks for writing in! The screenshot didn’t upload due to the file size. Can you please upload it again so we can have a better understanding? Also the link isn’t working either.

Thanks!

[masterssonParticipant]

http://bootsnipp.com/snippets/KrrEK

Reattached screenshot with example of where I would like the Line Tabs to be situated on page.

[ChristopherModerator]

Hi there,

X has tab element, you can insert it using cornerstone.
Please provide us with your website URL so we can see what you’ve already achieved.

Thanks.

[masterssonParticipant]

Are you referring to this X tab Element: http://theme.co/x/demo/renew/1/shortcodes/tabbed-content/ ?

IF so, I would rather the tab element have the look of the screen shot and link that I originally posted. Is this not possible on X ?

[ChristianModerator]

Yes, that is it. What you want to achieve is possible using X Tabs but CSS customization is needed. Please setup an X tab then add the code below in your Appearance > Customize > Custom > CSS.

.x-nav-tabs.top>.active>a, .x-nav-tabs.top>.active>a:hover {
    border-bottom: 2px solid red;
}

Thanks.

[masterssonParticipant]

This code has made no impact to the X tab. Also I would need the tab to cover the whole width of the page again like the screenshot. Also the css.style from the screenshot is more desireable the the default X tab (with the horizontal line dividing the tabs). Thanks.

[JadeModerator]

Hi there,

Please try this code:

li.x-nav-tabs-item.active {
    border-bottom: 4px solid #f3565d !important;
}

li.x-nav-tabs-item.active a {
    padding-bottom: 8px;
}

.x-nav-tabs.top > li {
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}

.x-nav-tabs, .x-tab-content,
.x-nav-tabs.top > li a,
.x-nav-tabs.top > .active > a, 
.x-nav-tabs.top > .active > a:hover {
    border: 0;
    background: transparent;
}

.x-nav-tabs.top > li a {
    padding: 10px;
}

Hope this helps.

[masterssonParticipant]

It goes some way but not all the way; tabs aren’t covering the width of the whole page like I would like them to. Also I would like the horizontal line to cover the whole width of the page (like a solid margin or divider between the line tabs and the section above).

[masterssonParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Does that mean just one long line above tab content instead of line per tab nav? Instead of adding the suggested CSS, please add this.

.x-tab-content {
    border-top: 4px solid #f3565d !important;
}

If not, please provide a mockup design of what should be done.

Thanks!

[masterssonParticipant]

CSS causes the Tab Menu to look like the image from screenshot. Mockup would be something similar to this website’s line tab: https://handup.org/. Is it not possible to just take the CSS and jscript (Bootstrap) code from this specfic site and place it in the customizer (CSS and Javascript) and / or style.css of the child theme?

[Rue NelModerator]

Hello There,

I have tried creating a test page here: http://activefutures.co.uk/an-x-test/
I’ve used this css in the settings tab, Settings > Custom CSS

.x-nav-tabs,
.x-tab-content {
    max-width: 1200px;
    margin: 0 auto;
}

.x-tab-content:before {
    content: "";
    position: absolute;
    top: 45px;
    left: -30%;
    width: 200%;
    height: 2px;
    background-color: red;
}

I also disabled the column container in the row settings. Hope this would work out for you.

[masterssonParticipant]

Hi,

I’m sorry but how do I view the test page (that you created)? I tried removing the “Under Construction” addon but it is still showing on test site?

I added code and it now looks like the screenshot attached. I think I’ll leave this style idea but would still like to know how I can change the color of the lines of the tabs from red to black. Thanks.

[Paul RModerator]

Hi,

You need to login to see it.

Thanks

[Author]

Posts