Need to style Tab

Hey calcuttadioceseonline,

Thank you for the inquiry.

You can start with the following css code. Just add it in the Quick CSS field or in the child theme’s style.css file.

#top a.av-section-tab-title {
  color: #ffffff;
  background: #3561a5;
  margin-left: 13px;
}

#top .av-tab-no-icon.av-tab-no-image .av-inner-tab-title {
  margin-bottom: 0;
}

#top .av-section-tab-title {
  padding: 0;
}

.av-tab-section-inner-container {
    border-top: 5px solid #3561a5 !important;
}

Please make sure to toggle the Performance > File Compression settings after adding the css.

Best regards,
Ismael

Hi,

Thank you for the update.

Where can we check the tab section? Please provide the site URL so that we can inspect the element directly. To learn more about custom css modifications, please check this documentation.

// https://kriesi.at/documentation/enfold/add-custom-css/

Best regards,
Ismael

Hi,

Thank you for the info.

You can add this css code to remove the arrow and center align the title.

#top .av-tab-arrow-container span {
    display: none;
}

#top .avia-tab-title-padding-none .av-outer-tab-title {
    padding: 0 0;
    position: relative;
    top: 0;
    width: 100%;
    left: -6px;
}

If you want to change the style of the active tab, use this css code.

#top .av-tab-section-tab-title-container .av-active-tab-title {
    color: red;
    background: black;
}

Best regards,
Ismael

Hi,

@famarinu: Did you include the first css code above? Please create your own thread and post the site details there because OP can view the content of the private fields in this thread. We temporarily removed your login account from the private field.

Best regards,
Ismael