randykepple

Tuanphan... you have been very helpful! Thank you for taking the time to answer my questions so thoroughly! My client is VERY happy with the progress on her new website and the way the mobile menu has turned out!

Well, that just made my day! Thank you! 

Also, thanks for the tip for the Chrome Dev Tools. I have used the Inspect Element tool, but it wasn't showing that specific ID/Class. Your answer was spot on and I think it's styled exactly as the client wants. 

Quick followup question. 

I'm also using the custom CSS that the original poster shared. To remove the transparent background, the first part of the CSS is:

@media screen and (max-width:640px) 

Your CSS is showing a max width of 767 pixels. Should those be the same, or does it matter? Assuming this is the width before the mobile settings kick in, right? If they should be the same, is there a best practice for mobile (pixel width)? I know there is a plethora of device sizes. 🙂

Really appreciate the assistance and information!

3 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

.header-menu-nav * {
    color: white !important;
}

 

Thank you so much! That solved the problem of the navigation text being black on the mobile site. 

If you look at the live site, you'll see that it's coming along nicely with the exception of the social media icons. That section/block on the mobile menu is still transparent and I'm not sure how to target that with CSS? Do you have the CSS "hook" for that section? 

BTW, on another topic. How are you finding the CSS for these sections? I've tried the Google Chrome browser extensions, but for the 7.1 site it does not seem to be showing how to target those sections. I must be missing something here. Not sure how to interpret block ID's into elements that can be styled by CSS. Does that make sense? (I'm comfortable editing CSS and HTML, but not familiar with these tools for Squarespace).

Thank you for your perfectly time assistance! We're having a client walkthrough of the beta site this afternoon. 

I have the same question about a site I'm working on with Squarespace 7.1. I've been testing the CSS you posted and it's working on my site. However, the background on the social is still transparent. How are you finding the CSS "hooks" for these sections? Any suggestions on how to style the text for the mobile menu? It's black and I'd like it to be white. (Using a transparent background on the header which is causing headaches for the mobile menu)

Live site: https://theskinprosclub.com/ (work in progress)