On mobile: hamburger missing, site title not changing size and transparency on menu

Hello, 

https://tuba-synthesizer-h36d.squarespace.com (PW: 12345)

On this site above, none of the CSS I've searched in the forum has worked to solve the following three issues in mobile:

1. The hamburger (or +) icon is invisible. If I tap the upper right corner, the menu appears, but cannot get the + icon to appear.  I've tried the z-index hack.

2. The menu background is transparent for some reason. I'd like it to be blue. What do I target?

3.  The site title is too large, and breaks into two lines on mobile. I've added CSS for this, but it's still showing up larger than the site font.

Thank you in advance! 

Screenshots from an iPhone 13 Mini.

@tuanphan any insights? 😬

@tokonoma  There's CSS added that sets your entire header as transparent, probably because of the gradient background you've got.

@media only screen and (max-width: 640px) {
  header#header * {
    font-family: 'CSB-Italic';
    font-size: 1.6rem !important;
    background-color: transparent !important;
  }
}
header#header * {
  font-family: 'CSB-Italic';
  font-size: 2rem !important;
  background-color: transparent !important;
}

If you remove both of the background-color lines from the above code this fixes it and the X will show. When you remove the transparency, the heading in the top section will also be hidden underneath the mobile menu when clicked, instead of showing through and overlapping with the mobile links.

For the site title, you can adjust this in Site Styles:

1. In site styles, go to Fonts
2. Click Assign Styles
3. Scroll down to the Header section
4. Click Mobile Site Title
5. Adjust size

To change the colour of your mobile menu:

1. Hover over the header and click Edit Site Header
2. Click the mobile icon
3. Click Overlay Menu
4. Click Colours and choose the one with a blue background

Hi! Thanks for your reply @CassAggett! 

The menu on mobile is working,  but could you help with targeting the background color  / removing the transparency on mobile menu using CSS? The default color method doesn't work for my site. 

In the screenshot, "Artist forward, purpose driven consulting" is the first section of the site, and should be hidden by a background.

3 hours ago, tokonoma said:

Hi! Thanks for your reply @CassAggett! 

The menu on mobile is working,  but could you help with targeting the background color  / removing the transparency on mobile menu using CSS? The default color method doesn't work for my site. 

In the screenshot, "Artist forward, purpose driven consulting" is the first section of the site, and should be hidden by a background.

 

 

 

You seem to still have multiple instances of code setting the background to transparent. It's now showing as:

@media only screen and (max-width: 640px) {
  header#header :not(.top-bun):not(.patty):not(.bottom-bun) {
    font-family: 'CSB-Italic';
    font-size: 1.6rem !important;
    background-color: transparent !important;
  }
}
header#header :not(.top-bun):not(.patty):not(.bottom-bun) {
  font-family: 'CSB-Italic';
  font-size: 2rem !important;
  background-color: transparent !important;
}

Try to find this in your Custom CSS panel - you may need to search line by line as the codes may not be next to each other. If you remove both of these instances of background-color: transparent !important; it will change the menu overlay to white, which is the colour you've got set in your Lightest 2 / Light Bold site styles - you can change this without CSS in the colour menu of site styles.

If you can't find these in your Custom CSS panel , try add this to the very bottom of your code as a last resort. You'll still need to change the Lightest 2 menu overlay colour in site styles to change it from white to blue (or select a different theme colour for your overlay menu from the Edit Site Header settings)

@media only screen and (max-width: 640px) {
  header#header :not(.top-bun):not(.patty):not(.bottom-bun) {
    background-color: var(--menuOverlayBackgroundColor) !important;
  }
}

It's not ideal to have duplicate/conflicting codes, but if it's pasted below the other one it should override it.

@CassAggett thanks!

I'm able to target the mobile menu overlay background color (see screenshots), but it also affects the menu / title bar on the rest of the site. I need the menu / title to still remain transparent, but have the mobile menu overlay be a solid color. Anyway to target this specifically? Like below?  

menuOverlayBackgroundColor

@tokonoma It looks like it's working to me?

@CassAggett

Thanks, the problem (still) is: the main page of the site is a long single scroll, and the background is a gradient that goes from light to dark. So, as soon as you scroll – it doesn't work (screenshot). I need the site title / menu bar on mobile to be transparent, but the the menu overlay (when you click +) to be solid. 

Just to follow-up / clarify – is there a way I can target the Menu Overlay on mobile to be a solid color (red screenshot), and keep the Title / Menu Bar transparent (second screenshot).

On 10/25/2023 at 11:33 PM, tokonoma said:

Just to follow-up / clarify – is there a way I can target the Menu Overlay on mobile to be a solid color (red screenshot), and keep the Title / Menu Bar transparent (second screenshot).

The site is expired. You can access this link to extend it, then we can check site easier

Thanks @tuanphan  – I've extended! Let me know about the mobile menu overlay.

Any ideas? @tuanphan @CassAggett

Thank you in advance

On 11/1/2023 at 7:24 AM, tokonoma said:

Thanks @tuanphan  – I've extended! Let me know about the mobile menu overlay.

You mean show like this?

@tuanphan

No, that's not it.

Due to some transparency settings for the gradient background (I think), the main page content (Artist forward, purpose driven...) was appearing with the mobile menu  (Our Expertise / How We Work / Meet Tamar / Contact). 

Then, I tried to add a solid background for the mobile menu (in red, for testing): 

BUT – that makes the Site Title when you leave the mobile menu, also red (when it needs to be transparent, to accomodate / scroll with the gradient background), as seen here:

All I want to do is target the mobile menu and give it a solid background color (without it affecting the site title when you leave the menu options).

It is fine to me, no text in middle of menu

(Your screenshot)

From my end

@tuanphan but it makes the Site Title outside the Mobile Menu a solid background (and that needs to be transparent to accomodate for the gradient background). 

See, in this screenshot. There shouldn't be two shades of blue.

So: 

– I need to target the mobile menu background overlay to be solid
– I need to keep the Site Title bar transparent once you go back to the site