CSS for Nav Item

Solved

CSS for Nav Item

chels_grove
Shopify Partner
68 0 20

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;
}

 

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8579 1692 1703

This is an accepted solution.

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;
}

Screenshot 2024-07-03 at 09.33.35.png

 

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Reply 1 (1)

Dan-From-Ryviu
Shopify Partner
8579 1692 1703

This is an accepted solution.

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;
}

Screenshot 2024-07-03 at 09.33.35.png

 

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.