Docs

[yhshin1020]

Hey,

I want to customise the tab i have on my website.

I want to do two things:

1) Add a fontawesome icon to the left of the tab title.

to this end i have tried adding the css

.x-nav-tabs > li > a {
  font-family: FontAwesome;
  font-size: 20px;
}

and then placing the UNICODE value of the icon instead of Tab Title, but the fontawesome font family doesnt seem to work.

2) I would like to emulate the effect seen here: https://codepen.io/mildrenben/pen/bdGdOb.

Where 1) the active item line is at the bottom of the nav list item (currently there is a black line at the top which I want to get rid of) and 2) the line slides smoothly to the next item.

Is there a way to emulate the same effect (add line at bottom of active item instead of top, make it slide)

I have tried adding a <div class="slide"></div> and trying to position it absolutely to overlap with the nav item with the following css:

.x-tab-content {
 position: relative;
}
.slide {
  background: #ffeb3b;
  width: calc(100% / 4);
  height: 4px;
  position: absolute;
  left: 0;
  top: calc(100% - 4px);
  -webkit-transition: left 0.3s ease-out;
  transition: left 0.3s ease-out;
}

Any help would be appreciated.

Thanks.

[yhshin1020]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in!

1. To add an icon, please add the following code in your Child Theme’s style.css file:

.x-nav-tabs-item a:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f030";
    float: left;
}
.x-nav-tabs.top>li {
    width: 25% !important;
}

2. Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[yhshin1020]

Hey,

Is there a way to move the black line at the top to the bottom instead?

Thanks.

[Paul R]

Hi,

Yes, you can add this under Custom > Edit Global CSS in the Customizer.

.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
    box-shadow: inset 0 -3px 0 0 hsl(0,0%,0%);
}

Hope that helps.

[Author]

Posts