Solved

Why is this specific CSS code line not functioning properly?

Toptoys2uHS
Explorer
87 1 9

Hello All,

 

I am struggling to find out why a certain line of CSS is not working, even though it is the exact same as two other lines of code, which work (apart from the text colour and the link).

 

Would anyone be able to resolve this issue and explain why this first line is not working?

 

Please see the code below.

 

.nav-bar__item a[href="/collections/bargain-bundle-boxes"] {
    color: #000000;
  font-weight: bold;
text-shadow: 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f;
}


.nav-bar__item a[href="/collections/clearance"] {
    color: #F2E90F;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000;
}    

.nav-bar__item a[href="/collections/hot-deals"] {
    color: #ef4a38;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000;
}   

Mystery Boxes menu.png

Appreciate any help!

Accepted Solution (1)

Raj-WebDesigne
Shopify Partner
60 16 14

This is an accepted solution.

Replace Your Css With This css

 

.nav-bar__item a[href="https://toptoys2u.co.uk/collections/bargain-bundle-boxes"] {
    color: #000000;
  font-weight: bold;
text-shadow: 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f;
}


.nav-bar__item a[href="/collections/clearance"] {
    color: #F2E90F;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000;
}    

.nav-bar__item a[href="/collections/hot-deals"] {
    color: #ef4a38;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000;
} 

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


View solution in original post

Replies 2 (2)

Raj-WebDesigne
Shopify Partner
60 16 14

This is an accepted solution.

Replace Your Css With This css

 

.nav-bar__item a[href="https://toptoys2u.co.uk/collections/bargain-bundle-boxes"] {
    color: #000000;
  font-weight: bold;
text-shadow: 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 1px 1px 2px #02f2ed, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f;
}


.nav-bar__item a[href="/collections/clearance"] {
    color: #F2E90F;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000;
}    

.nav-bar__item a[href="/collections/hot-deals"] {
    color: #ef4a38;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000;
} 

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


Toptoys2uHS
Explorer
87 1 9

Hello @Raj-WebDesigne 

 

Thank you for your help!

This seems to work. 

 

Could you explain why it worked? The only difference I can see between your code and my code is the a[href="/collections/bargain-bundle-boxes"] changing to a[href="https://toptoys2u.co.uk/collections/bargain-bundle-boxes"], but the lines below do not have have a full link, and they seem to work fine?

 

Thank you for your help!