Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Mobile Menu Overlay Colour Changes


BenJohnson
Go to solution Solved by tuanphan,

Question

Site URL: https://www.benjohnsonphoto.com/

Hello,

I'm wanting to alter the mobile menu overlay colours, however I am unable to find it in the squarespace design settings or use the correct CSS. Currently, it has a black background and white text. I would like to reverse this so the background is white and text black. 

Cheers,

Ben

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 1
@media screen and (max-width:767px) {
.header-menu-bg.theme-bg--primary {
    background: white !important;
}
.header-menu-nav * {
    color: black !important;
    fill: black;
}
.burger--active .burger-inner>div {
    background: black !important;
}
}

New code

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

If you still can't find the setting, add this to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.header-menu-bg.theme-bg--primary {
    background: white !important;
}
.header-menu-nav * {
    color: black !important;
    fill: black;
}
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
10 hours ago, tuanphan said:

If you still can't find the setting, add this to Home > Design > Custom CSS


@media screen and (max-width:767px) {
.header-menu-bg.theme-bg--primary {
    background: white !important;
}
.header-menu-nav * {
    color: black !important;
    fill: black;
}
}

 

This worked, thank you @tuanphanhowever the exit cross is white and not visible. 

Link to post
  • 0
22 minutes ago, tuanphan said:

@media screen and (max-width:767px) {
.header-menu-bg.theme-bg--primary {
    background: white !important;
}
.header-menu-nav * {
    color: black !important;
    fill: black;
}
.burger--active .burger-inner>div {
    background: black !important;
}
}

New code

Sensational! Thank you kindly. I was also wanting to add a hover effect for my logo on the desktop. I will uploading an image to replace the current generic title and this will be black. I would like to have the hover change from black to grey. I will have a separate logo image with the specified grey, I'm just unsure how to create the hover with CSS. 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...