Navigation symbol inconsistent between pages


I’m having issues with my nav bar. It’s set up as a symbol. On the main landing pages (Design, Writing, Experiments) everything looks great. If I click on “About” or any of the project pages, you’ll notice a shift in the positioning of the text in each nav link box / button on the right, they all shift upwards by a couple pixels. I can’t figure out why this is happening. I’ve tried copying and pasting the same symbol from the pages that are working to the pages that aren’t. I’ve looked at the top margins and height in all states of the links on different pages, and they always read numerically consistent between each page, but visually they’re not the same.

The top margins are currently 6px. If I try to change the margin to 8px, then it fixes the positioning of the links on the pages that look too high, but then the positioning is incorrect on the pages that look good now.

I’ve taken a look at this post: Navigation as Symbol is Inconsistent Across Pages and this seems like a viable cause of the problem, some sort of issue with how I edited the states of the links while they were in Current mode. But I don’t understand how to fix it because all of the values seem to be reading the same.

I’m pretty out of ideas. Anyone have suggestions?

Here is the live site:
Here is my site Read-Only:

Thanks for looking! I appreciate any suggestions.

I could find why the buttons change between pages. However, to fix this, make the buttons flexbox with a vertical and horiz centering, and nuke the 6pt top padding on those too. Now they’ll be consistent.

Yes, that did it! Thanks so much @vincent.

1 Like