XF 1.5 Navtab ResponsiveNarrow Tab Width Control

Mark T

Active member
#1
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.
Code:
@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
Code:
   border-bottom: none !important;
to below the padding padding string of PublicTabs.

But that doesnt seem to change anything.

Also just tried
Code:
.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.
 
Last edited:

Mark T

Active member
#2
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.

Code:
@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! (y)
 
Top