Custom header button not showing on mobile menu

Hi there,

I created a custom header menu button so it has an image in instead of text. Issue is, on the mobile menu, the button is blank. Can't work out why or find a solution. Any help much appreciated!

Current code I'm using is:

.header-actions-action .btn {
    background-color: transparent !important;
    background-image: url(https://images.squarespace-cdn.com/content/655760ca5ce91354ff938b5a/71a5c7bc-6aac-454f-979c-b857c95f03f1/Discover+CLUB.png);
    background-size: contain !important;
    background-position: center;
    background-repeat: no-repeat !important
}

Site: https://mustard-bird-7p9h.squarespace.com/
Password is: FG123

Thanks!

@FGFGFG try using this selector for the mobile one. replace your code with this to target both at the same time.

.header-menu-cta, .header-actions-action {
  .btn {
    background-color: transparent !important;
    background-image: url(https://images.squarespace-cdn.com/content/655760ca5ce91354ff938b5a/71a5c7bc-6aac-454f-979c-b857c95f03f1/Discover+CLUB.png);
    background-size: contain !important;
    background-position: center;
    background-repeat: no-repeat !important
  }
}

17 minutes ago, jaeveedee said:

@FGFGFG try using this selector for the mobile one. replace your code with this to target both at the same time.

.header-menu-cta, .header-actions-action {
  .btn {
    background-color: transparent !important;
    background-image: url(https://images.squarespace-cdn.com/content/655760ca5ce91354ff938b5a/71a5c7bc-6aac-454f-979c-b857c95f03f1/Discover+CLUB.png);
    background-size: contain !important;
    background-position: center;
    background-repeat: no-repeat !important
  }
}

 

Thanks for your reply. It disappears completely on the mobile menu with this code.

@FGFGFG is the code in there still? I don't see it. If it's not can you add it back and ill see whats not working?

3 minutes ago, jaeveedee said:

@FGFGFG is the code in there still? I don't see it. If it's not can you add it back and ill see whats not working?

It's in now, thanks

13 hours ago, jaeveedee said:

.header-menu .header-menu-cta, .header-actions-action {
  a.btn {
    background-color: transparent !important;
    background-image: url(https://images.squarespace-cdn.com/content/655760ca5ce91354ff938b5a/71a5c7bc-6aac-454f-979c-b857c95f03f1/Discover+CLUB.png) !important;
    background-size: contain !important;
    background-position: center;
    background-repeat: no-repeat !important
  }
}

Try and replace with this. Added some more specificity and there was something overriding your background-image part so added !important to that.

I think this has worked, thank you!!