Why is this specific CSS code line not functioning properly?

[Toptoys2uHS]

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

Appreciate any help!

[Raj-WebDesigne · 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;
} 

[Toptoys2uHS]

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!