Jump to content

Mobile Navigation Menu Help

Recommended Posts

Site URL: https://harmonica-pike-dxz2.squarespace.com/

Site Password: Twilight450

Hey everyone,

I'm currently experiencing a bit of an issue with the mobile version of my site. As you can see in the attached image, the nav menu is semi-transparent and shows a lot of the background of the website, instead of being 100% opacity and covering the background like I want. I believe this is because the color scheme I'm using has 50% opacity on the background color, but I can't find an option for mobile specifically. Is there a work around for mobile specifically? My client and I really enjoy the darker blue background color we get from the 50% opacity option, but this mobile nav is obviously unusable.

Thanks in advance! 

mobile example.JPG

Link to comment
  • Replies 3
  • Views 1.1k
  • Created
  • Last Reply

Hey @DanielLucasDesigns! I just took a look and the menu is full color for me over here 😕 maybe something just got stuck in the code and you just need to "turn it off and back on again" aka reload the site builder page? If the problem still persists, you can add this code to force the open menu to be full color: 
 

.header--menu-open .header-menu.black-bold .header-menu-bg {background-color: #266880!important; opacity:1!important;}

 

current view.png

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Link to comment
26 minutes ago, inside_the_square said:

Hey @DanielLucasDesigns! I just took a look and the menu is full color for me over here 😕 maybe something just got stuck in the code and you just need to "turn it off and back on again" aka reload the site builder page? If the problem still persists, you can add this code to force the open menu to be full color: 
 


.header--menu-open .header-menu.black-bold .header-menu-bg {background-color: #266880!important; opacity:1!important;}

 

current view.png

Hey there! Sorry I was playing around on the back end and made it full opacity to see if I could do anything with the code from one of your videos haha

 

It should be fully transparent now as it was before. I tried combining some of the coding from your latest video while adding in "-background-overlay:opacity 1!important)" but no change.

Link to comment
30 minutes ago, inside_the_square said:

Hey @DanielLucasDesigns! I just took a look and the menu is full color for me over here 😕 maybe something just got stuck in the code and you just need to "turn it off and back on again" aka reload the site builder page? If the problem still persists, you can add this code to force the open menu to be full color: 
 


.header--menu-open .header-menu.black-bold .header-menu-bg {background-color: #266880!important; opacity:1!important;}

 

current view.png

I have since changed "Black Bold" back to "Accent Dark", which is pictured in the screen shot. Does that change the code any? The code you sent I've copied and pasted, saved and refreshed, but no changes unfortunately. 

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.