This is my navigation component. It works generally well, except that the button text gets ever so slightly squished upwards when I’m on any given blog post page. I can’t figure out what is causing this. Using inspect tool in Chrome reveals that they should look identical, but they don’t. This only happens on blog post pages. It looks like it should on all other pages.
Worth mentioning is that, inside this navigation is a cms collection with a button inside of it fetching data from a specific blog post, which I’m suspecting is what is causing me problems.
My apologies, I misread and thought you meant the Blogg page and not the posts. That said, I’m still not seeing any difference on my end on any of those Collection Item pages.
Does this happen in the Designer, on the staging link, or both?
No problem! It seems like the problem has resolved itself after I changed the content of the button. I wonder if maybe it was because the font changed on the blog post pages for whatever reason.
This is how it looked for me on the published site
Glad it seems to be looking more consistent for you after the change
As far as the image you attached, those are two different fonts (most noticeable on the ascender of the ‘b’, the ‘a’ and the ‘9’) so I’m guessing the Current pseudo-class is changing the font when the button link matches the page URL.
Just to be sure, I took another peek at the project and the button is showing the green Current class within the Style selector along with a blue label for the Font dropdown (indicating an override):
This is because you’re button link is set to use the “Current Blog Post” page:
Removing that override shows the same “Roboto” font family so I’m guessing you’ve updated the style since posting the screenshot above. Either way, I’d recommend removing the style override on the Current button pseudo-class just so there’s a bit less (redundant) CSS on the project
