Inconsistent component

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.

Any thoughts?

weird instance


Here is my site Read-Only: LINK

I’m not seeing this issue on my end — the “Home”, “Om oss” and “Blogg” pages all show the text centered nicely within the button:

Home
image

Om oss
image

Blogg:
image

Did you happen to figure out the issue? If not, what browser are you using?

Still not figured it out, I’m using Chrome. It looks good on those pages yes, but not on the CMS pages. The pages containing the blog post themselves.

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

misaligned buttons

Glad it seems to be looking more consistent for you after the change :tada:

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:

image

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 :+1:

1 Like

Ohh there you go now it makes sense, thank you! It was just a font change all along :sweat_smile:

Navigation component issue on blog pages. Likely font change with Current pseudo-class. Investigate for consistency.