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

7.1 Mobile Menu Header/Logo Design & Styling

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

Share this post


Link to post

24 answers to this question

Recommended Posts

  • 1

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?


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

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


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?

Share this post


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

Share this post


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

Share this post


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!

Share this post


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!

Share this post


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!

Share this post


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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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 

Share this post


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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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? 

 

Share this post


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

 


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

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


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

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


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?

Share this post


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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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