Multiple Header Buttons and One Linked to an Anchor Tag in Footer

Site URL: https://turtle-broccoli-z9zz.squarespace.com/config/design/custom-css

I have multiple buttons in my header, and I did this by using the code pasted below. In order for the code below to work, the buttons have to be linking to other pages. That works for one of my buttons/pages, but my other button needs to link to an anchor tag in the footer instead of a separate page.

Could someone (@tuanphan—I'm always grateful for your responses) help me with some code that would allow me to have two buttons in the header to the left of my social media links where one button links to the anchor tag in the footer ("Contact" in attached screenshot) and one button links to a page ("Login" in attached screenshot) with this also working on mobile?

Thank you so much!

— — —

// 2 Navigation Buttons //

.header-nav-item:nth-child(4) a, .header-nav-item:nth-child(5) a {
  background: #ffb549 !important;
  color: #FFFFFF !important;
  width: 80px;
  border-radius: 0px;
  text-align: center !important;
}

// Navigation Padding //

.header-nav-item a {
  padding: 8px !important;
}

// Active Navigation Line //

.header-nav-item--active a {
  background-image: none !important;
}

On 9/30/2021 at 4:44 AM, Madisen said:

Site URL: https://turtle-broccoli-z9zz.squarespace.com/config/design/custom-css

I have multiple buttons in my header, and I did this by using the code pasted below. In order for the code below to work, the buttons have to be linking to other pages. That works for one of my buttons/pages, but my other button needs to link to an anchor tag in the footer instead of a separate page.

Could someone (@tuanphan—I'm always grateful for your responses) help me with some code that would allow me to have two buttons in the header to the left of my social media links where one button links to the anchor tag in the footer ("Contact" in attached screenshot) and one button links to a page ("Login" in attached screenshot) with this also working on mobile?

Thank you so much!

— — —

// 2 Navigation Buttons //

.header-nav-item:nth-child(4) a, .header-nav-item:nth-child(5) a {
  background: #ffb549 !important;
  color: #FFFFFF !important;
  width: 80px;
  border-radius: 0px;
  text-align: center !important;
}

// Navigation Padding //

.header-nav-item a {
  padding: 8px !important;
}

// Active Navigation Line //

.header-nav-item--active a {
  background-image: none !important;
}

Your site is private now, you add to it a protected password to check it together