Header items - text color and logo size on scroll

TutiraBen
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!
 

KetanKumar
Shopify Partner
20481 2116 7721

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
20481 2116 7721

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
TutiraBen
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
KetanKumar
Shopify Partner
20481 2116 7721

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
TutiraBen
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
KetanKumar
Shopify Partner
20481 2116 7721

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
TutiraBen
Tourist
6 0 2

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

0 Likes
KetanKumar
Shopify Partner
20481 2116 7721

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AbbyS
New Member
1 0 1

Hi @KetanKumar

 

Has this been resolved. I have the same issue on the font color for menu items. I will like to change the color when the user scrolls.

I will also like to fix sticky header to be responsive