Return to previous page

Header – colour not change when scroll down

This topic has 15 replies, 2 voices, and was last updated 4 months, 2 weeks ago ago by Tony Rodriguez

proyectoswebit

Participant

December 4, 2023 at 18:42

We are trying to change the color of the header elements when scrolling the web. We want to obtain a transparent header with the menu letters, logo, store icons, favorites, etc. in white and when we scroll, these elements turn black with a white background. Is there anywhere where an element can be assigned two different colors? Example: White shopping basket and black when scrolling. You can review in: https://dev.webitprojects.com/

#375658 Copied Theme version: 9.2.5 WooCommerce version: 8.3.1

14 Answers
Tony Rodriguez

Support staff

December 5, 2023 at 06:22
Hello, @proyectoswebit,

Thank you for reaching out to us.

To “Change the header elements color during scrolling,” kindly proceed with the following instructions:

1. Access the Theme Custom CSS:
a. Navigate to XStore >> Theme Options >> Theme Custom CSS >> Global CSS.
b. Insert the CSS code provided below into the specified area:
```
.et_b_header-menu .menu li {
    color: #fff !important;
}
.sticky-on .et_b_header-menu .menu li {
    color: #000 !important;
}
.et_b_header-account.et_element-top-level > a svg {
    fill: #fff !important;
}
.sticky-on .et_b_header-account.et_element-top-level > a svg {
    fill: #000 !important;
}
.sticky-on .et_b_header-search.et_element-top-level .et_b_search-icon svg path {
    fill: #000 !important;
}
.sticky-on .et_b_header-wishlist.et_element-top-level > a svg path {
    fill: #000 !important;
}
.sticky-on .et_b_header-cart.et_element-top-level > a svg path {
    fill: #000 !important;
}
```
For additional assistance, please refer to the visual guide available at the following links:
– https://ibb.co/V3BhHTn
– https://ibb.co/Gv8K3qz

Please note that you may customize the color of the header elements to your preference.

2. To add a separate logo for the sticky header, please follow these steps:

– Go to XStore >> Theme Options >> Header Builder >> Header Sticky >> Custom Sticky Logo.

For a comprehensive visual guide, visit the link below:
– https://ibb.co/XjzdtS0

Should you have any further inquiries or require additional support, please do not hesitate to contact us.

Yours sincerely,
The 8Themes Team
#375679 Copied
proyectoswebit

Participant

December 5, 2023 at 10:04

Good morning,

Regarding this issue, we apply the css, but it´s not working as a global solution. I explain:

We have two different headers on the website:

1 – The header that corresponds to the entire site except for the home page. This header does not need changes when scrolling since it is always on a white background with black elements.

2- The header that corresponds to the home. It is in this header where we cannot differentiate the colors of the elements when scrolling. When accessing the page, the header is transparent with the elements in white and when scrolling we want the elements to appear black since the background is white.
With the css that you have sent us it affects both headers but we need it to only affect the first one.

Likewise, when you introduce an image of the logo in black in the sticky header of the home page, it does not take the image and when you scroll, it continues to take by default the white image of the logo that exists when you do not scroll.

Please send us an appropriate CSS so that it only affects the home header and is adaptive for mobile and tablet.

Please also tell us how to add a line to the entire header at the bottom.

(How Can I attached some pics in order to show how we do it ?)

#375707 Copied
Tony Rodriguez

Support staff

December 5, 2023 at 12:56
Hello, @proyectoswebit,

If you want the CSS to apply exclusively to the home page, please follow these steps:

a)Navigate to XStore >> Theme Options >> Theme Custom CSS >> Global CSS.
b)Replicate the following CSS code into the designated location.
```
.home .et_b_header-menu .menu li {
    color: #fff !important;
}
.home .sticky-on .et_b_header-menu .menu li {
    color: #000 !important;
}
.home .et_b_header-account.et_element-top-level > a svg {
    fill: #fff !important;
}
.home .sticky-on .et_b_header-account.et_element-top-level > a svg {
    fill: #000 !important;
}
.home .sticky-on .et_b_header-search.et_element-top-level .et_b_search-icon svg path {
    fill: #000 !important;
}
.home .sticky-on .et_b_header-wishlist.et_element-top-level > a svg path {
    fill: #000 !important;
}
.home .sticky-on .et_b_header-cart.et_element-top-level > a svg path {
    fill: #000 !important;
}
```
Note: You can change the color of the header elements as you desire.

If you have any additional questions or if there’s anything else I can assist you with, please don’t hesitate to reach out.

Yours Sincerely,
8Themes Team.
#375748 Copied
proyectoswebit

Participant

December 7, 2023 at 11:03

Hello, I have added the changes as indicated, but it is still not 100% correct, let me explain:

– The logo on the home page when scrolling is not changed and the one with a black background is changed.

– on pages that are not the home page (For example: https://dev.webitprojects.com/news/), the search magnifying glass icon does not appear, by default it is white and on these pages the background is white and cannot be seen. I was trying to put it in black, but when I did it it also applied to home plate and it looked white.

Could you review these two topics?

Thank you.

#376015 Copied
Tony Rodriguez

Support staff

December 7, 2023 at 13:12
Hello, @proyectoswebit,

I hope this message finds you well.

1. We would like to provide you with guidance on how to modify the logo within the sticky header exclusively on the homepage of your website. To achieve this, you will need to create multiple headers and assign a specific header to the homepage by applying a conditional setting.

To assist you in this process, I have included links to images that will serve as a visual reference for the steps outlined below:

– [Image Guide 1](https://ibb.co/4Tpgw0n)
– [Image Guide 2](https://ibb.co/zJjzfWh)

Once you have set up the separate header, you can then designate the custom logo for the sticky header by navigating to:

Xstore >> Theme Options >> Header Builder >> Sticky Header

2. Furthermore, to ensure the desired aesthetic is reflected throughout your site, please insert the following CSS code into the designated area within your theme settings:

Navigate to:

Xstore >> Theme Options >> Theme Custom CSS >> Global CSS

And paste the following code:
```
:not(.home).et_b_header-search.et_element-top-level .et_b_search-icon span.et_b-icon svg {
    fill: #000 !important;
}
```
After applying the CSS code, please remember to clear your browser cache before reviewing the changes on your site.

Should you require any further assistance, please do not hesitate to reach out.

Best regards,
The 8Theme Team
#376026 Copied
proyectoswebit

Participant

December 7, 2023 at 15:55

2. I implemented the solution but is not working. Could you review in this image https://ibb.co/BVyw1L6.

At this moment the css is in the website: https://dev.webitprojects.com/ but search icon in home page is black.

Could you assist me ?

Thank you

#376052 Copied

proyectoswebit

Participant

December 7, 2023 at 16:46

Regarding point 1. We have setup like you report me but is not working.

you can see in this picture: https://ibb.co/wzZS9Rq

#376058 Copied

Tony Rodriguez

Support staff

December 8, 2023 at 05:26

Hello, @proyectoswebit,

Thank you for your response.

In order to assist you with your inquiry, we request that you provide us with URL and temporary access to the wp-admin of your website. This will enable us to take a closer look at your settings and provide you with a more accurate and specific solution.

To do this, please follow these steps:
– Create an account via Dashboard (Users > Add new) with administrator role. Refer to the following image for guidance: http://prntscr.com/s3rc9m
– Provide us with the username and password for the newly created account via the Private Content area. Refer to the following image for guidance: http://prntscr.com/s5mao7
– Any email address can be used for the new account, it does not have to be your personal email.

We kindly recommend that you take a complete backup of your site before proceeding.

Please let us know once you have completed these steps, and we will promptly review your account information and provide assistance as soon as possible.

Kind Regards,
8theme team

#376079 Copied

proyectoswebit

Participant

December 8, 2023 at 14:33

Hi Tony,

I send to you information requested in private area.

Could you tell what´s the country that are you connected to admin wordpress ? (There is a rule to avoid connect to any country and I have to grant it) Please tell me IP address too.

Thank you.

Regards.

Please contact administrator
for this information.

#376134 Copied

Tony Rodriguez

Support staff

December 9, 2023 at 05:13

Hello, @proyectoswebit,

We kindly request that you review the private content area at your earliest convenience.

Best Regards,
The 8Theme Team

Please contact administrator
for this information.

#376173 Copied

proyectoswebit

Participant

December 9, 2023 at 16:52

Allowed

Please contact administrator
for this information.

#376206 Copied

Tony Rodriguez

Support staff

December 11, 2023 at 05:43

Hello, @proyectoswebit,

Thank you for your response.

We are pleased to inform you that the issue you reported has been successfully resolved. We kindly ask that you revisit your website after clearing your browser’s cache to see the changes implemented.

Additionally, we have updated the search icon color for enhanced visibility and consistency across your site. On the homepage, the search icon has been changed to white, while on all other pages, it has been set to black. Please refer to the attached images for a visual reference of these adjustments. https://ibb.co/yyvRJR0 and https://ibb.co/QMPKHtV

Should you require any further assistance or have additional inquiries, please do not hesitate to reach out.

Best Regards,
The 8Theme Team

#376236 Copied

proyectoswebit

Participant

December 11, 2023 at 09:41

Hi, Tony,

Thank you for your support, we have come a long way.

But we continue with two issues.

1. But in the case of a page that is not the home page, when you scroll, the search icon turns white again.

https://tmpsee.com/v/lZSs1Pz6eD

2.- The logo on the home page does not change to black when I scroll. This is the example image link: https://tmpsee.com/v/9cOQv8iWoF

Please, could you review ?

Thank you Tony

#376277 Copied

Tony Rodriguez

Support staff

December 11, 2023 at 12:05

Hello, @proyectoswebit,

Thank you for your response.

1/ We are pleased to inform you that the issue you reported has been successfully resolved. We kindly ask that you revisit your website after clearing your browser’s cache to see the changes. Our team has adjusted the color of the search icon in the sticky header, which should address your concern.

For your reference, here is a visual confirmation of the update: https://imgur.com/V8kAASo

2/ We are pleased to inform you that the issue you reported has been successfully resolved. We kindly ask that you clear your browser’s cache and revisit your website to see the changes.

Our team has implemented a logo widget in the header of the front page and configured a custom sticky logo, which should address the concern you brought to our attention.

For your reference, we have included an image that illustrates the update. https://imgur.com/MtR3xcr and https://imgur.com/HvXsybG

Should you require any further assistance, please do not hesitate to reach out.

Best regards,
The 8Theme Team

#376301 Copied
Tagged: customization solutions, header colour change, responsive themes, scroll down, website design, woocommerce templates, wordpress
Viewing 15 results - 1 through 15 (of 15 total)