As designed Search button becomes detached from nav at smaller font sizes

[Warchamp7]

Affected version

2.0.4

Here's a demo image on the default theme with font-size: 10px set on html



Adding the User nav item to p-discovery fixes the issue, so it appears the user avatar is the element causing the nav to remain attached

 

[grisha2217]

Here's a demo image on XenForo.com with font-size: 10px set on html

View attachment 178187

How did you setted up 10px font? When i did 80% page size, i see it good

 

[Warchamp7]

How did you setted up 10px font? When i did 80% page size, i see it good

Using Chrome's inspector tool to create the example here. On my website I have the default font size set to 14px, which causes a 1px gap between search and the nav. I did 10px as an extreme example

Changing page zoom won't cause this, since it'll scale everything on the page down, not just the font size

 

[Chris D]

With the way the elements here are laid out, significantly the avatar, if the font-size is reduced, you'll also need to shrink the avatar size too. It's that which is adding the extra height to the account section which isn't also added to the search section.

These values should work at 14px font-size:

.p-navgroup-link.p-navgroup-link--user .avatar
{
    width: 19px;
    height: 19px;
}