CSS for Nav Item

[chels_grove]

Hi All -

We have this CSS currently on our site - it was to make the Reserve Now link look more like a button. Then we added in dropdowns and now any link that goes to /rent is a box. We could change the url, but looking to see if anyone else has a solution so that only the Reserve Now mimics a button. ChatGPT did offer up the code below, with “contains…” but that didn’t work either. https://skis-on-the-run.myshopify.com/

.navigation__item [href*="rent"] {
  background-color: #0a3159;
  color: #ffffff;
  border-radius: 2px;
  padding: 0.5rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
  margin: 1rem 0 1rem 1rem;
}

Below did not work, even with taking out href, changing the capitalization of the reserve now, etc.

.navigation__link[href*="rent"]:contains("Reserve Now") {
  background-color: #0a3159;
  color: #ffffff;
  border-radius: 2px;
  padding: 0.5rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
  margin: 1rem 0 1rem 1rem;
}

[Dan-From-Ryviu]

Please update your code to this version

.navigation__link[aria-controls="NavigationTier2-4"] {
    background-color: #0a3159;
    color: #ffffff;
    border-radius: 2px;
    padding: 0.5rem 1rem;
    text-decoration: none;
    text-transform: uppercase;
    margin: 1rem 0 1rem 1rem;
}