7.1 Mobile Menu Header/Logo Design & Styling

Hi, I am trying to style the mobile menu on a new site in 7.1. Wow, very frustrating that this is not an option!

First, I am just confused where the default styles are inherited from.

Second, I have figured out how to change the background color of the middle and bottom portions of the mobile menu with custom CSS, but I have not had success changing the top header piece (I ultimately want the whole background of the menu to be completely blue #2f4e98, with white type and the button as is).

Third, is it possible to specify a different logo (full color) for mobile if I were to stick with the cream background?

Site is live at: https://rootds.com

Thanks!
Melissa

Second. Add to Home > Design > Custom CSS

.burger-inner:after {
    background: red !important;
}
.burger-inner:before {
    background: green !important;
}

Third, you can use CSS to do this. Can you share link to new logo?

Tuanphan,

Thank you for your help!! I added that, but I believe it just changed the menu icon color. I prefer the white hamburger on the homepage, but left as is so you can see. I think I'm looking to change .header-announcement-bar-wrapper dark but when I try to use that in the CSS, it doesn't work.

Thanks!

I think I got this to work by adding the following custom CSS:

For the header background color:

@media screen and (max-width:640px) {.tweak-transparent-header .header .header-announcement-bar-wrapper:not(.shrink):not(.transparent-header-theme--override) {
background-color: #2f4e98 !important; 
  }
}

For the bottom piece with CTA button:

.header-menu-cta {
  background-color: #2f4e98; 
}

For the middle section with Nav items:

.header-menu-nav-folder-content {
  background-color: #2f4e98; 
}

And to change the hamburger/X icon colors:

.burger-inner:after {
    background: #fff !important;
}
.burger-inner:before {
    background: #fff !important;
}

That seemed to work on the preview, but doesn't hold up when saved, the mobile header bar is still the cream color, so I reverted back. Any other thoughts on how to tackle that mobile menu header so that it is solid blue on mobile, but doesn't affect the transparency on desktop?

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)

On 5/7/2020 at 11:12 PM, randykepple said:

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)

 

Add to Home > Design > Custom CSS

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

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. 

9 hours ago, randykepple said:

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. 

 

 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.header-menu-bg.theme-bg--primary {
    background: red !important;
}
}

If you know HTML/CSS, you can use Inspect Element (Right Click) to find these ID/Class.

Reference: https://beaverhero.com/squarespace-71-css-list/

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!

8 hours ago, randykepple said:

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!

SS 7.0 usually use max-width:640 for mobile

SS 7.1 use max-width:767

If you don't want to remember both, you can use 767, it runs in both cases.

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!

Kindly answer my question

Thanks to all of the above for the custom code!

I have an additional query - I can't figure out how to change the colour of the social icons, and the outline of the button in the mobile menu. I've tried to inspect the element on chrome but I can't figure out what ID/Class I need to use! Thanks!

6 hours ago, donovanryan said:

Thanks to all of the above for the custom code!

 

I have an additional query - I can't figure out how to change the colour of the social icons, and the outline of the button in the mobile menu. I've tried to inspect the element on chrome but I can't figure out what ID/Class I need to use! Thanks!

Can you share link to your site? We can check easier.

@tuanphan I have a question in addition to this post. Would you be able to help me? 

Can't find a way to edit the Mobile burger menu on my client's site. https://www.floralcouturebyjay.co.uk/

The 2 lines are very thin, and cannot always be seen easily against background header images. I would either want to thicken them, or make them 3 lines. 

Please may you advise on how to do this? 

Many thanks in advance,

Sophie 

1 hour ago, sophieameliadesignsUK said:

@tuanphan I have a question in addition to this post. Would you be able to help me? 

Can't find a way to edit the Mobile burger menu on my client's site. https://www.floralcouturebyjay.co.uk/

The 2 lines are very thin, and cannot always be seen easily against background header images. I would either want to thicken them, or make them 3 lines. 

Please may you advise on how to do this? 

Many thanks in advance,

Sophie 

Add to Home > design > Custom CSS

.burger-inner:after, .burger-inner:before {
    height: 3px;
}

10 hours ago, tuanphan said:

Add to Home > design > Custom CSS

.burger-inner:after, .burger-inner:before {
    height: 3px;
}

@tuanphan

 Thank you although this doenst seem to be working. I'm hoping it would show thicker lines but it doesnt :( Any ideas? 

On 7/23/2020 at 3:16 AM, sophieameliadesignsUK said:

 

SS has changed the code structure of the burger menu recently, so the above code no longer works.

Add new code

.burger-inner>div {
    height: 3px !important;
}

@tuanphan this is so perfect, thank you!

On 2/22/2020 at 7:06 AM, tuanphan said:

.burger-inner:after { background: red !important; } .burger-inner:before { background: green !important; }

@tuanphan Hi Tuanphan

The above code doesn’t work for me. Wanting to change the close »X« colour in the mobile header (see picture) from this website:

https://www.thermodynamx.ch/

It’s live.

.header-burger-btn.burger.burger--active .burger-inner.header-menu-icon-tripleLineHamburger > * {
    background-color: red;
}

On 2/23/2020 at 7:40 AM, melmotz said:

I think I got this to work by adding the following custom CSS:

For the header background color:

@media screen and (max-width:640px) {.tweak-transparent-header .header .header-announcement-bar-wrapper:not(.shrink):not(.transparent-header-theme--override) {
background-color: #2f4e98 !important; 
  }
}

For the bottom piece with CTA button:

.header-menu-cta {
  background-color: #2f4e98; 
}

For the middle section with Nav items:

.header-menu-nav-folder-content {
  background-color: #2f4e98; 
}

And to change the hamburger/X icon colors:

.burger-inner:after {
    background: #fff !important;
}
.burger-inner:before {
    background: #fff !important;
}

The code for changing the X color didn’t do anything. Do you know if it’s called something else now?

also, how would you change the contact button color?

15 hours ago, jacobstonefilms said:

The code for changing the X color didn’t do anything. Do you know if it’s called something else now?

also, how would you change the contact button color?

SS changed header code structure. Use this code

.burger--active .burger-box .burger-inner>div {
    background: red !important;
}

@tuanphan do you know how to get a hover effect on the menu items?? similar to this site? https://www.envida.com/