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

7.1 Mobile Menu Header/Logo Design & Styling


melmotz

Question

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

Edited by melmotz
added logo question
Link to post
  • Answers 26
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 E

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

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; }  

Posted Images

Recommended Posts

  • 1

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;
}

Edited by melmotz
Link to post
  • 1
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;
}

 

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

-- I came back. Will answer soon.

Link to post
  • 1
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/

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

-- I came back. Will answer soon.

Link to post
  • 1
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.

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

-- I came back. Will answer soon.

Link to post
  • 0

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!

Edited by melmotz
Link to post
  • 0

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?

Link to post
  • 0
Posted (edited)

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)

 

Edited by randykepple
Link to post
  • 0
Posted (edited)
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. 

 

 

Edited by randykepple
Link to post
  • 0

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!

Link to post
  • 0

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!

Link to post
  • 0

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!

Link to post
  • 0
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.

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

-- I came back. Will answer soon.

Link to post
  • 0

@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 

Link to post
  • 0
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;
}

 

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

-- I came back. Will answer soon.

Link to post
  • 0
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? 

 

Link to post
  • 0
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.

Screenshot 2020-08-09 at 20.48.26.png

Link to post
  • 0
.header-burger-btn.burger.burger--active .burger-inner.header-menu-icon-tripleLineHamburger > * {
    background-color: red;
}

 

Link to post
  • 0
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?

Link to post
  • 0
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;
}

 

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

-- I came back. Will answer soon.

Link to post
  • 0

@tuanphan

I'm trying to have my mobile menu so that when you click the hamburger icon the whole background is the same blue as the header with white text/everything else.

I tried your code above and it didn't seem to effect it. 

I'd appreciate any help you may have to offer.

The site is live at: kingdomswimmingclub.ie

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