Tabs Styling CSS: Removing hover accent

Support
#1

Hi there,

I have added the CSS for my tabs and it looks fine, except for two things:

  1. When hovering over the tab headings, there is an accent (blue) that hovers above the text that I can’t get rid of.

  2. The border of the right side of the right-most tab seems to be split (or has a white spot in the middle of it), that I would like to remove.

Do you have any suggestions?

Thanks!

#2

Hi There,

Please do the following :

Remove

.x-nav-tabs, .x-nav-tabs > li {
    -webkit-box-shadow: none;
    /box-shadow: none; 
    /border: 2px solid #fabc33; 
    /border-color: #fabc33; 
  
}

Please add:

.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
    box-shadow: none;
}

.x-nav-tabs, .x-nav-tabs > li {

    border: 0px;
}

.x-nav-tabs > li > a {
    border: 2px solid #fabc33;
    border-right: 0px;
}

.x-nav-tabs > li > a:last-child {
     border-right: 2px solid #fabc33;
}

Let us know how it goes.

Thank you

#3

That worked perfectly - looking at the code it makes sense, but as a beginner it’s a little beyond me to string that all together!

Thanks so much for your help and advice :slight_smile:

#4

Glad we could help.

Cheers!