TabsHeaderItem colour change
Question
Application Type
Reactive

Hello All, 

I am developing an application that utilizes the Tabs widget and I am struggling with some styling for the TabsHeaderItem. I have managed to figure out how to change their colour via CSS however i cannot figure out how to remove the blue line when the tab is active. I would like the blue line to be removed, or be colour matched to the rest of the tab.

An image of the tabs and my current CSS is imaged below.

Many thanks,
Max


Solution: 

Despite the others most likely proving a correct answer, i kept the exact CSS i had however, simply added:

border-right: none!important;

This removed the border as I wanted. The "important" tag is necessary as it did not work without this.

Thankyou to those who replied.


Hello Maxwell Mckinnon,

add this in your application CSS

.layout-side .app-menu-links a.active {

      border-right: none;

}

if above is not work add important like below 

.layout-side .app-menu-links a.active {

      border-right: none! important;

}

Thanks and Regards,

Akshay Deshpande

Thankyou it is working now.

Hello You need to make changes to this class to remove the blue border on active tab


.tabs.tabs-vertical .tabs-header-tab.active {

    border-right: none;

}

.desktop .tabs.tabs-vertical .tabs-header-tab.active:hover {

    border-right: none;

}

.tabs.tabs-vertical .tabs-header .tabs-header-tab {        

border-right: none;

}

 .desktop .tabs.tabs-vertical .tabs-header-tab:hover {  

  border-right: none;    

}

I am also attaching Oml for your reference -

Sample here

Hope this helps 
Thanks

TabsSample.oml

Thankyou it is working now.

Solution: 

Despite the others most likely proving a correct answer, i kept the exact CSS i had however, simply added:

border-right: none!important;

This removed the border as I wanted. The "important" tag is necessary as it did not work without this.

Thankyou to those who replied.


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.