Header – colour not change when scroll down

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

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.

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