Jump to content

Mobile header navigation and branding color change in Brine

Recommended Posts

Site URL: https://faithstrongsite.squarespace.com/

Hi!

I implemented the code below to change the color of my header elements on one mobile page from gold to white. Mobile elements don't seem to change color with different background colors like on desktop. This is the code:

#collection-56099b55e4b0ec7b8a89d273 .Mobile-bar-menu, .Mobile-bar .Cart {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

#collection-56099b55e4b0ec7b8a89d273.has-site-title .Mobile-bar-branding {
  color: #ffffff !important;
}

The issue is the number in the shopping bag did not change from gold to white on the home page and the bag itself stays white on the about page. Images are below. What am I doing wrong? pw: faithstrong

Thanks!

Screen Shot 2021-02-01 at 10.09.34 AM.png

Screen Shot 2021-02-01 at 10.09.51 AM.png

Link to comment
15 hours ago, Kico said:

Add to Design > Custom CSS

body.homepage span.sqs-cart-quantity {
    color: white !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

YES! I figured it out! Probably a very inelegant solution but here's what I did to have the mobile header elements switch colors based on the page background color in the same way as the desktop version.

#your specific page .Mobile-bar .Mobile-bar-menu {
  stroke: #ffffff !important;
}

#your specific page .Mobile-bar .Cart, .tweak-mobile-bar-cart-style-bag-alternate  {
  stroke: #ffffff !important;
}

#your specific page .Mobile-bar-branding {
  color: #ffffff !important;
}

#your specific page.tweak-mobile-bar-cart-style-bag-alternate .Mobile-bar .Cart .sqs-cart-quantity {
   color: #ffffff !important;
}

Link to comment
  • 1 month later...

I actually have a related question to your post on four/30. I've adjusted the Continue Shopping hyper link to redirect to my store instead of my homepage, but it does not seem to be running.

Edited by kilorsae33
Link to comment
  • 2 weeks later...
On 3/14/2021 at 8:38 AM, kilorsae33 said:

I actually have a related question to your post on four/30. I've adjusted the Continue Shopping hyperlink to redirect to my store instead of my homepage, but it does not seem to be running.

Can you share link to cart page? We can help easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.