XF 1.5 Navtab ResponsiveNarrow Tab Width Control

[CTS]

I have created this snippet of code for EXTRA.css.

The purpose of it is to allow me custom override of the navtab tab width elements in responsive narrow view only.

@media (max-width:@maxResponsiveNarrowWidth)
{
.navTabs .publicTabs .navLink
{
    padding: 0 15px !important;
}
.navTabs .visitorTabs .navLink
{
    padding: 0 7px !important;
}
}

It works as designed and desired.


I have one issue though is that I cannot find why while viewing in responsivenarrow view, I get an extra border at the bottom the active tab in publicTabs.




just tried adding

   border-bottom: none !important;

to below the padding padding string of PublicTabs.

But that doesnt seem to change anything.

Also just tried

.navTabSelected
}
    border-bottom: none !important;
}

to no avail


Can anybody see what I am doing wrong here ?


edited to reflect what I just found and one of my misdiagnoses.

 

[CTS]

You know, sometimes I just need to talk it out with people outloud even if nobody responds, in order for the solution to hit me.

@media (max-width:@maxResponsiveNarrowWidth)
{
.navTabs .publicTabs .navLink .navTabSelected
{
    padding: 0 15px !important;
    border-bottom: none !important;
}
.navTabs .visitorTabs .navLink .navTabSelected
{
    padding: 0 7px !important;
    border-bottom: none !important;
}
}

This is the working solution. Enjoy it if you want it!
Thank you all for being here anyways!