my transparent header to change to white or black when hovering over the header.

[orangeblossomksa]

I’m wondering if it is possible for my transparent header to change to white or black when hovering over the header?

• This topic was modified 1 year, 2 months ago by orangeblossomksa.

Hello,

The Hover effect doesn’t directly work for the overall Header. The Hover effect works for the elements under the Header.

So, the background color can be changed in this regard when the Header turns sticky. On your Site, currently the Sticky Header already has a black background: https://snipboard.io/TpPd2v.jpg

Further, you can read more about the Header Builder here: https://xtemos.com/docs-cat/header-builder/?theme=woodmart

Best Regards

Hello,

Thank you for your answer.

But do you have code to enable this to work?
Because this shape is not welcome when I have a dropdown button. https://snipboard.io/N4LICP.jpg

Hello,

If you directly want to change the background color of the Header without Sticky too, then you need to edit the Main Header position under your Header Builder > there you can define the Background Color: https://snipboard.io/barjxB.jpg

Or you can simply not use the Header Overlap layout of the Header on your Site.

Best Regards

Hello,

I really want the header to be transparent.

Thanks for your reply!

Hello,

If that is so then kindly please elaborate your issue further with a Video if possible for better understanding what exactly you want to achieve with the transparent Header? Because right now there is an ambiguity & confusion regarding understanding your mentioned concern.

Also, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards

1- When the header is STOP, the background color is transparent with white text and icons also.
2- When Over on and scrolling down, the background is white with black text and icons also.
3- How do I remove the arrows next to the drop down menus?
4- How can I put spaces in letters?

Attachments:

You must be logged in to view attached files.

Hello,

1- Sorry to say but you haven’t provided Super Admin access with your provided Logins so we are unable to check the changes on your Site, we don’t have access even to the Appearance > Customize > where we can try and apply Custom CSS to check. So, we are sending it here for you to try the following Custom CSS on your site to make the Menu Links and Icons white for the Transparent Header:

body:not(.single-product) .whb-overcontent:not(.whb-sticked) .whb-row:not(.whb-with-bg) a {
    color: #fff !important;
}

The Sticky Header background and items are already the way you have mentioned, so they won’t need to be changed or modified.

2- To remove the Arrows for the dropdown Menu, please try using the following Custom CSS on your Site:

.wd-nav[class*="wd-style-"]>li:is(.wd-has-children,.menu-item-has-children)>a:after {
  display: none !important;
}

3- Which spaces are you referring to among the letters, we didn’t get it exactly. If you referring to modifying the formatting for the Menu Items, then you can go to Dashboard > Theme Settings > Typography > Advanced > there you can select the Main Navigation or Secondary Navigation links > and there specifically define the Font Formatting for them: https://snipboard.io/qheC4p.jpg

Further, you can read more about Advanced Typography here: https://xtemos.com/docs-topic/advanced-typography-settings/

Best Regards

Sorry about that, now you can log in.
What is meant by letter spacing is that I want to add certain spaces, measured in pixels, between the letters of one word, so that the font size is the same, but it has more width . (I did not find it in customizing the font)

*I wrote the code you sent.*
*I sent a screenshot of the feature but from Elementor*

Attachments:

You must be logged in to view attached files.

Hello,

Regarding the Letter Spacing concern, please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:

.wd-nav[class*="wd-style-underline"] .nav-link-text {
    letter-spacing: 2px !important;
}

In this CSS, you can change the value of letter-spacing according to your choice that best suits you.

Best Regards

Hello Aizaz,

I really appreciate your help 🙂

1- The feature of changing the header when moving the mouse does not work. * super admin access is activated if you can try *
2- The underline did not change the color of the text, Can it only show on hover, not when opening the page?
3- The drop down menu does not change the color of the texts until scrolling down.

Thanks!

Attachments:

You must be logged in to view attached files.

Hello,

1- If you are referring to changing the Menu Items color on Hover, then you can try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:

body:not(.single-product) .whb-overcontent:not(.whb-sticked) .whb-row:not(.whb-with-bg) #menu-main-menu-left a span:hover {
    color: red !important;
}

body:not(.single-product) .whb-overcontent:not(.whb-sticked) .whb-row:not(.whb-with-bg) #menu-main-menu-right a span:hover {
    color: red !important;
}

This CSS will change both the Menus (i.e. on the left & right) color on hover without Sticky. Hope this helps !

2- The underline color is also adjusted to white color without sticky.

3- The dropdown issue occurred because of one of the CSS applied, it was working globally which we have now adjusted and the dropdown menu items are now appearing and showing without scrolling too.

Best Regards

Hello Aizaz,

Thank you very much for your effort for me 🙂

1- I was talking about changing the background color of the header when hovering, not the text color.
2- Can show underline only when on hover not when opening the page?

Best Regards

Hello,

1- In this regard, like we mentioned you earlier the Hover functionality can’t be applied to Header as a whole itself, this isn’t possible.

2- Although, this change was directly not possible but we have applied the Custom CSS on your Site to achieve that. Please check back your Site after completely clearing the browser and server cache.

Best Regards

Hello Aizaz,

No problem, I got confused when you said you check it when you log in.

The underline: https://snipboard.io/vCbX8q.jpg
The left part is working with code
The right part does not work with underline *without sticky*
The code is not applied when sticky

I hope to hear from you soon!

Best Regards

Hello,

The further adjustment in this regard that you have mentioned has now been applied on your Site with the help of Custom CSS being applied.

Please check back your Site after completely clearing the browser and server cache.

Best Regards.

Hello Aizaz,

Its application has been completed successfully.
Thank you very much for your help.

Best Regards.

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts