Not a bug Navigation tabs shift horizontally when another tab is clicked

[Mr Lucky]

Affected version

Version 2 beta 7

I find it rather disconcerting that when you click from one tab to another, the tabs shift. I presume this is due to the space that was taken up by the triangle which opens the dropdown.

This is something that quite a few sites used to do in the past, but these days surely it is something that can be easily avoided so the tab accommodates room for the triangle when it isn't there.

 

[Mike]

This isn't something that we're going to be changing at this point. It's not inherently something that I think is an explicit bug, but further, properly changing it requires compromises that I don't think we're willing to make in the core.

First, it requires adjustments of the padding for the selected tab. This isn't inherently a deal breaker, though it's pretty fragile. It's possible to calculate this in LESS:

@_nav-selectedPaddingH: (
      (@xf-publicNavPaddingH)
      + ((@xf-publicNavPaddingH) / 4)
      + (2 * (@xf-publicNavPaddingH) / 3)
      + ((@xf-fontSizeNormal) * .58)
   ) / 2;

With the default 15px, that effectively ends up being 18.7px on each side. There is a small bonus here that when the sticky nav kicks in, it doesn't shift the nav row, though we still shift the text to display, so there's still movement happening there anyway. (And there are plenty of other things that would cause a shift here that may end up being triggered, such as a small logo display.)

More significantly though, even with this in place, there's still some amount of shifting. This is because the selected tab text is bold, which takes up more horizontal space than regular weight text. This isn't calculable, though there are hacks to do a faux bold without taking up more space.

XF1 has effectively the same issue, though perhaps not as pronounced because the primary cause there is the bold text (and the whole text/nav is smaller, including the arrows which are both shorter and narrower than in XF2).

 

[Mr Lucky]

I thought the answer might be something along those lines...

I notice it more now that it is possible to add extra tabs, if they are quite narrow (e.g. with an icon rather than text) it seems to become highly noticeable as the shift is relatively large compared with the tab.