Vertical text alignment issues in Bootstrap 4 navbar

Question

User695372294 posted

I'm using Bootstrap 4.5.2 in an ASP.NET Web Application and text in the navbar-brand class is failing to line up precisely with text in the nav-link class, i.e. the menu items. The navbar-brand text is slightly lower than the menu text. I didn't have this problem with Bootstrap 3.

After struggling to fix this with various CSS adjustments, I had another look at the Bootstrap4 documentation at w3schools.com and found that this issue was also present in their BS4 Navbar examples (you have expand the browser window to make the menu text visible in the following example).

https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_collapse

Both Firefox and Chrome display this problem. Does anyone know how to fix it?

Answer 1

User303363814 posted

navbar-brand would typically be an image and so there are no 'text baselines' to line up

In the case where you wish to manipulate the positioning of navbar-brand then you could add some padding

.navbar-brand { padding-bottom:  8px; padding-top: 2px;}

Answer 2

User695372294 posted

navbar-brand would typically be an image and so there are no 'text baselines' to line up

In the case where you wish to manipulate the positioning of navbar-brand then you could add some padding

.navbar-brand { padding-bottom:  8px; padding-top: 2px;}

Hi Paul,
Changing the padding of .navbar-brand does indeed fix my problem  :)

I thought I'd already tried that, but it looks like I had just been trying to make sure that both my navbar-brand text and the menu text had exactly the SAME settings for padding, etc. I gave up my CSS tweaking and raised this query when I saw that the w3schools example (which didn't use a logo) showed the same problem, as I assumed the solution must be more complicated than it turned out to be.

Many thanks for your help.