XF1 [TUT] Navtab ResponsiveNarrow-Only Tab Width Control

There are times where your tab width's need to be crushed down a bit to make your navbar operate in a more visually appealing way for your users who browse your site's using their devices that utilize ResponsiveNarrow renderings.

I found this useful on my site primarily for logged-in users when the visitors bar was populated, in order to optimize the full navigation bar when using on a smartphone in portrait view.

This is a simple add-in to your EXTRA.css template.
HTML:
/* == manually override navtab and visitortab widths for ResponsiveNarrow styling == */ @media (max-widthmaxResponsiveNarrowWidth) { .navTabs .publicTabs .navLink .navTabSelected { padding: 0 15px !important; border-bottom: none !important; } .navTabs .visitorTabs .navLink .navTabSelected { padding: 0 10px !important; border-bottom: none !important; } }
To change the width (bigger or smaller) of your Navigation Tabs, just change the publicTabs padding pixel value more or less.

To change the width (bigger or smaller) of your Visitor Tabs, just change the visitorTabs padding pixel value more or less.