Jump to content

Custom CSS Mobile Menu Only Works In Edit Mode

Recommended Posts

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

Screenshot 2024-06-07 at 8.32.12 PM.png

Screenshot 2024-06-07 at 8.32.30 PM.png

Link to comment
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

Screenshot 2024-06-07 at 8.32.12 PM.png

Screenshot 2024-06-07 at 8.32.30 PM.png

Try the following selector to set CSS only live website

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

}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
On 6/12/2024 at 7:26 AM, Fat_Bird_Creative said:

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:

Power-Cleaning-Victoria_Mobile-Menu.jpg

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.