Header items - text color and logo size on scroll

Highlighted
Tourist
6 0 2

I hope someone can help with two challenges I have in my header please:
 
1. I would like the text and search icon color in my pre-scroll header to be white. When I alter this in the header settings it gets overridden by the color of body text setting and I'd like to prevent that from happening. It needs to retain the flexibility to be black on scroll and other (non-home page) pages

2. When I scroll on any page the logo in the header becomes very small and I'd like it to remain the same size as its pre-scroll state  

I'm using Palo Alto theme, URL is https://tutira.com/  pw = thewmu

Thanks in advance!
 

1 Like
Highlighted
Shopify Partner
7657 1052 2660

@TutiraBen 

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.supports-js .has-scrolled .site-header.fixed .site-nav__item>a {
color: #b44918;
}
.supports-js .has-scrolled .site-header.fixed .site-nav__item .icon--search g {
    stroke: #b44918;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Shopify Partner
7657 1052 2660

@TutiraBen 

Logo 
can you please remove logo image blank spacing otherwise your logo fine

see the issue 
image.png

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
6 0 2

@KetanKumar thank you for your message and suggestion! I tried that code but it was quite the right solution.

Let me explain: on my transparent header if not scrolled then the text and search icon should be white, then once the user scrolls, the text and search icon should become black. Do you know a solution for that? 

 

 

 

 

0 Likes
Highlighted
Shopify Partner
7657 1052 2660

@TutiraBen 

yes, i know chagne i have proper code just can be change color code as your above solution.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
6 0 2

Thanks @KetanKumar. That's perfect for when the user has scrolled, but what I am trying to change is the color of the items in the header when the user has not scrolled, without changing the body text color. 

Can anyone else suggest a solution here? 

Many thanks!

 

 

 

0 Likes
Highlighted
Shopify Partner
7657 1052 2660

Yes is possible to this.
if you have a home page change the other page so i need to check back end code so please add me on staff.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
6 0 2

Thank you @KetanKumar - I have added you as staff. Please advise a solution when you can.

0 Likes
Highlighted
Shopify Partner
7657 1052 2660

@TutiraBen 

Thanks for add 

i have done this, please check.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like