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

Mobile header navigation and branding color change in Brine


Kico

Question

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

8 answers to this question

Recommended Posts

  • 0
 
No Such Website
The website you requested does not exist.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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