Jump to content

Mobile Menu Background Color Change

Recommended Posts

  • 10 months later...
2 hours ago, tuanphan said:

Change menu background or menu items color?

1) Both if possible, I'd like to use the same color theme as the rest of my website but fpr some reason it doesn't apply on the mobile menu page.

 

2) Can the drop down arrows point downward instead of right?
Attaching an example:

Screenshot_20210506-194153_Instagram.jpg

Link to comment
19 hours ago, Juelz said:

1) Both if possible, I'd like to use the same color theme as the rest of my website but fpr some reason it doesn't apply on the mobile menu page.

 

2) Can the drop down arrows point downward instead of right?
Attaching an example:

Screenshot_20210506-194153_Instagram.jpg

Add to Design > Custom CSS

.header-menu-bg.theme-bg--primary {
    background: black;
}
.header-menu-nav * {
    color: red !important;
}
span.chevron.chevron--right {
    transform: rotate(135deg);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
20 hours ago, tuanphan said:

.header-menu-bg.theme-bg--primary { background: black; } .header-menu-nav * { color: red !important; } span.chevron.chevron--right { transform: rotate(135deg); }

You're the best, THANK YOU!!!!!

Link to comment

Also, do you need to fix these problems?

Site URL – https://www.soulmaidjewelry.com/

1. (Mobile-Overlay Menu) Change “X” color?

soulmaidjewelry.com-01-min.png

2. (Mobile-Homepage) Change to 2 products/row?

soulmaidjewelry.com-02-min.png

3. (Mobile-Footer) Reduce logo size?

soulmaidjewelry.com-03-min.png

4. (Mobile-Footer) Align left Disclaimer

soulmaidjewelry.com-04-min.png

5. (Footer-Mobile) Move logo to top of footer?

soulmaidjewelry.com-05-min.png

6. (Tablet-Homepage) Reduce these white space?

soulmaidjewelry.com-06-min.png

7. (Tablet-Homepage) Change to 2 products/row?

soulmaidjewelry.com-07-min.png

8. (Mobile-Shop Categories) Make 2 items/row?

soulmaidjewelry.com-08-min.png

9. (Mobile-Shop) Show category links on top of products?

soulmaidjewelry.com-09-min.png

10. (Mobile-Products) Show breadcrumb on top of producs? Show thumbnails under big image?

soulmaidjewelry.com-10-min.png

11. (Blog) You haven’t changed SEO Title so the browser tab name still shows “Blog 1”

soulmaidjewelry.com-11-min.png

12. (Tablet-Blog posts) Increase text width?

soulmaidjewelry.com-12-min.png

13. (All devices) Add Tag/Category name on top of posts on Tag/Category page?

soulmaidjewelry.com-13-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
8 hours ago, KateLouise said:

Hi there!

Is it possible to get code to do the same to my site - I want the mobile menu to be the same color theme as the rest of the site (change to black background, 'Darkest 1' theme).

https://www.katelouise.art/

Thank you for any help in advance!

 

Screen Shot 2021-06-09 at 2.30.22 PM.png

Screen Shot 2021-06-09 at 2.30.32 PM.png

For entire site or homepage only?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 6/10/2021 at 12:28 PM, KateLouise said:

Just for the menu page on mobile view - the one that is white in the screenshot.

I just want to turn that page black with white writing, like the rest of the site.

(The link again in case - https://www.katelouise.art/)

Add to Design > Custom CSS

/* Mobile menu */
.header-menu-bg.theme-bg--primary {
    background-color: black;
}
body.header--menu-open header#header * {
    color: white !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 6/12/2021 at 9:23 PM, AlishaK said:

May I get some assistance with changing the button style in the mobile menu? I'm trying to change the font and color. I'd like the button color to stay blue but the font to change to the hex and font-family below. I've tried this:

 

.button.header-cta * {
  color: #F7EFE7;
  font-family: 'MDNichrome0.7';
}

Site is here: https://bamboo-icosahedron-37sw.squarespace.com/

Thank you!

Hi. Use this code

a.theme-btn--primary.btn {
    color: #F7EFE7 !important;
    font-family: 'MDNichrome0.7';
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...
On 11/28/2021 at 2:16 AM, Adenphotography said:

hi @tuanphan can i please have some help,

i've tried multiple css to change the colour of my header site title on my homepage ONLY but none have worked. I want my header title to be white only on the homepage of my site.

here's my site https://jaguar-lobster-k8ze.squarespace.com/ and password is photography321

much appreciated

Add to Design > Custom CSS

body.homepage a#site-title {
    color: red !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

Hello @tuanphan I have a similar inquiry. I tried some of the above custom code, but it wouldn't work.

on my website: www.pale-studio.com, in MOBILE view, I would like to achieve the following:

- adjust mobile menu background color to #d9d2ca (it should stay transparent on desktop viewing).

- Adjust mobile menu functioning to drop down, instead of a horizontal 'next page'

- mobile menu: possible to adjust the two >> arrows for another icon? For example, just one arrow, up or down?

Screenshot 2023-05-04 at 18.56.44.png

Screenshot 2023-05-04 at 18.56.56.png

Link to comment
On 5/5/2023 at 12:05 AM, Elisabethh said:

Hello @tuanphan I have a similar inquiry. I tried some of the above custom code, but it wouldn't work.

on my website: www.pale-studio.com, in MOBILE view, I would like to achieve the following:

- adjust mobile menu background color to #d9d2ca (it should stay transparent on desktop viewing).

- Adjust mobile menu functioning to drop down, instead of a horizontal 'next page'

- mobile menu: possible to adjust the two >> arrows for another icon? For example, just one arrow, up or down?

Screenshot 2023-05-04 at 18.56.44.png

Screenshot 2023-05-04 at 18.56.56.png

#1. #3. Add to Design > Custom CSS
 

/* Mobile Menu Dropdown */
.Mobile-overlay {
    background-color:  #d9d2ca !important;
}
.Mobile-overlay-nav-item--folder:after {
    content: "\e009" !important;
    font-family: 'squarespace-ui-font' !important;
}

#2. I don't know this

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.