Buttons and Text not centered in the navigation bars and menus

Hi,

every time I am using the nav bar, the silde menu or the nav overlay, the icons inside the buttons are set more to the top and are not centered in the middle of the button:

Also the text is not set around a middle line on the navbar. The smaller menu items are set higher than the title:

Is there a way to set this straight? I love to have the icons in the buttons centered and the text wrapped around a middle line.

Thanks

Jan

What version of Stacks are you using? Foundry requires version 3.1 or newer of Stacks. What you’re describing sounds to me like you’re using a version prior to v3.1.

Just back from a short holiday. Yes, I am using the latest stacks version 3.2.3. I will send you the project, so you can look at it. Just add some navbar menus or buttons and see for yourself. Thank you!

Just replied to your email. Thought you’d originally meant the content of the buttons weren’t aligned horizontally. I see now from your email you meant the button contents weren’t aligned vertically within the button. I’ll re-hash the email here in this post as well so other might benefit from the answer in case they too run into this:

It looks like it may have to do with the font you’re using. The line-height of that font seems to be causing an odd alignment of elements (content within the button). Not all fonts are created equally as good as others. If you switch your base font to say Helvetica for example (instead of the custom Hind Guntur font) you see that a font that handles line-heights properly displays the button fine.

I believe this is where the problem lies. Let me know if switching fonts clears up your issue.

1 Like

Thanks. I try switching fonts and report!

Yes, it was the fonts. Is there a way to see if Google fonts are savy to be used before using them?

It isn’t that the font isn’t usable, it is just that it has an odd line-height for some reason. Only way to tell how a font will look on a site is to try it out, like you have done.