Navigation Custom CSS

Site URL: https://mango-ukulele-m7ej.squarespace.com/

My goodness, just another person looking at how to get static ID's of my html elements within my header. Specifically I'm just trying to put three navigation links across 90% of my header. "Home" in the middle, the other pages on the far left and far right of the header while the other 10% has the social links. I would love to know how to edit the CSS values of any of these attributes and what their static ID's are if any. Or if I could reference the class in order to achieve this goal. (attached DEV tools html)

Side tangent. Its insane that these ID's are not obviously documented publicly, the amount of 3rd party tutorials that are not consistent across each use case is proof Squarespace is disregarding their advanced users. Also, the fact that I even need to reach for CSS to do something this simple is worth starting the conversation to switch to a better, more innovative web builder.

Hi, I'm not entirely sure what you're trying to do but you don't need static IDs to target these nav links. Here is some CSS that allows you to target the 3 nav links individually:

.header-nav-item {
  &:nth-child(1) {
    // styles for the first link
  }
  &:nth-child(2) {
    // styles for the second link
  }
  &:nth-child(3) {
    // styles for the third link
  }
}

The IDs are not documented because they shouldn't be used in most cases. Tutorials that advise using them are, in my opinion, incorrect and likely to cause issues in the future. If you know your CSS you don't need to use them.

I hope that helps.