Custom CSS Mobile Menu Only Works In Edit Mode

I have a Mobile menu background added using CSS but it only works when I try to edit the custom CSS. I tried deleting all the other custom CSS to see if there was a cross-over or conflicting code, but it still did not work. 

URL: powercleaningvictoria.squarespace.com
Password: PCV2024
 

// Mobile Menu Background //
.header-menu-bg {
background: url(https://static1.squarespace.com/static/663d65fba845475004447526/t/665e931dce8e1a524296dcba/1717474078381/Power-Cleaning-Victoria_Mobile-Menu.jpg);
background-size: cover;
background-position: center;
}

//Mobile - Font colors//
.header--menu-open a{color:#cadfd8!important}
.header--menu-nav-item-active a{color:#cadfd8!important;}

I'd appreciate the help

5 hours ago, Fat_Bird_Creative said:

I have a Mobile menu background added using CSS but it only works when I try to edit the custom CSS. I tried deleting all the other custom CSS to see if there was a cross-over or conflicting code, but it still did not work. 

URL: powercleaningvictoria.squarespace.com
Password: PCV2024
 

// Mobile Menu Background //
.header-menu-bg {
background: url(https://static1.squarespace.com/static/663d65fba845475004447526/t/665e931dce8e1a524296dcba/1717474078381/Power-Cleaning-Victoria_Mobile-Menu.jpg);
background-size: cover;
background-position: center;
}

//Mobile - Font colors//
.header--menu-open a{color:#cadfd8!important}
.header--menu-nav-item-active a{color:#cadfd8!important;}

I'd appreciate the help

Try the following selector to set CSS only live website

body:not(.sqs-edit-mode) {

}

On 6/8/2024 at 2:07 AM, Beyondspace said:

Try the following selector to set CSS only live website

body:not(.sqs-edit-mode) {

}

 

Thanks, for the suggestion. but it didn't work.

@Fat_Bird_Creative Try adding !important after the url of the background image:

.header-menu-bg {
background: url('https://static1.squarespace.com/static/663d65fba845475004447526/t/665e931dce8e1a524296dcba/1717474078381/Power-Cleaning-Victoria_Mobile-Menu.jpg') !important;
background-size: cover;
background-position: center;
}

On 6/10/2024 at 10:38 AM, Lesum said:

@Fat_Bird_Creative Try adding !important after the url of the background image:

 

Sorry, this didn't work either. It made it transparent for some strange reason. 

@Fat_Bird_Creative Please check your image. The image you used appears to be a transparent image. Or maybe try using a different image? 

20 hours ago, Lesum said:

@Fat_Bird_Creative Please check your image. The image you used appears to be a transparent image. Or maybe try using a different image? 

The image I'm using is a jpeg, so it's not transparent. But I did try loading a different image and it still didn't work (even with the !important flag).

Heres the image:

On 6/13/2024 at 8:07 PM, tuanphan said:

You can use this new CSS code

div.header-menu-bg.theme-bg--primary {
    background-color: transparent !important;
    background-image: url(https://content.invisioncic.com/p289038/monthly_2024_06/Power-Cleaning-Victoria_Mobile-Menu.jpg.ed382ebcd9c97105abfc2ee22c953b50.thumb.jpg.d354b798644438f270505aabf71a2e2e.jpg) !important;
}

 

This worked! 
Thank you @tuanphan