Home › Forums › WoodMart support forum › my transparent header to change to white or black when hovering over the header.
my transparent header to change to white or black when hovering over the header.
- This topic has 17 replies, 2 voices, and was last updated 1 year, 8 months ago by Aizaz Imtiaz Awan.
-
AuthorPosts
-
February 14, 2023 at 10:54 am #442776
orangeblossomksaParticipantI’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, 8 months ago by orangeblossomksa.
February 14, 2023 at 2:48 pm #442912
Aizaz Imtiaz AwanKeymasterHello,
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
February 14, 2023 at 4:07 pm #442953
orangeblossomksaParticipantHello,
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.jpgFebruary 14, 2023 at 4:54 pm #442974
Aizaz Imtiaz AwanKeymasterHello,
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
February 14, 2023 at 5:21 pm #442986
orangeblossomksaParticipantHello,
I really want the header to be transparent.
Thanks for your reply!
February 15, 2023 at 9:01 am #443135
Aizaz Imtiaz AwanKeymasterHello,
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
February 16, 2023 at 3:39 pm #443631
orangeblossomksaParticipant1- 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.February 17, 2023 at 10:01 am #443810
Aizaz Imtiaz AwanKeymasterHello,
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
February 18, 2023 at 10:09 am #444213
orangeblossomksaParticipantSorry 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.February 18, 2023 at 12:55 pm #444262
Aizaz Imtiaz AwanKeymasterHello,
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
February 18, 2023 at 5:30 pm #444290
orangeblossomksaParticipantHello 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.February 20, 2023 at 9:45 am #444543
Aizaz Imtiaz AwanKeymasterHello,
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
February 20, 2023 at 10:33 am #444565
orangeblossomksaParticipantHello 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
February 20, 2023 at 3:20 pm #444666
Aizaz Imtiaz AwanKeymasterHello,
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
February 20, 2023 at 4:15 pm #444698
orangeblossomksaParticipantHello 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 stickyI hope to hear from you soon!
Best Regards
February 21, 2023 at 10:03 am #444901
Aizaz Imtiaz AwanKeymasterHello,
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.
February 21, 2023 at 11:44 am #444947
orangeblossomksaParticipantHello Aizaz,
Its application has been completed successfully.
Thank you very much for your help.Best Regards.
February 21, 2023 at 3:01 pm #445039
Aizaz Imtiaz AwanKeymasterMost 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. -
AuthorPosts
Tagged: background, change, color, header, hovering, my transparent header, over it
The topic ‘my transparent header to change to white or black when hovering over the header.’ is closed to new replies.
- You must be logged in to create new topics. Login / Register