Return to previous page

I was given this code to position hover button in the right and change its background color but its

This topic has 26 replies, 3 voices, and was last updated 1 years, 7 months ago ago by Kazi Sabit

Kazi Sabit

Participant

October 1, 2022 at 05:18

I was given this code to position hover button in the right and change its background color but its background color is not changing.

Please, contact administrator
for this information.

#335524 Copied Theme version: 8.3

25 Answers
Tony Rodriguez

Support staff

October 1, 2022 at 07:03
Hello, @Kazi Sabit,

Actually, You added a different code that’s why it is not working.

The code we shared with you is below code.
```
.et-mobile-panel .et_column:nth-child(3)>a span.et_b-icon{
width: 50px !important;
text-align: center !important;
background: red !important;
border-radius: 50px !important;
height: 50px !important;
margin-top: -30px !important;
border: solid 2px white !important;
}
.et-mobile-panel .et_column:nth-child(3)>a span.et_b-icon span.et-svg{margin-left:10px !important;}
.et-mobile-panel-wrapper .et-wrap-columns{overflow:visible !important;}
```
And we share this code with you in this topic: https://www.8theme.com/topic/how-to-make-cat-button-look-bigger-then-the-rest-and-change-background/#post-335219

But you used the code of this topic: https://www.8theme.com/topic/can-i-bring-hover3-buttons-menu-top-under-the-price-vertically-horizontally/#post-328196

So it’s a misunderstanding from your side. Please try to use the above code that I shared with you I hope your issue will be resolved.

Regards 8Themes Team.
#335539 Copied
Kazi Sabit

Participant

October 1, 2022 at 07:19

I am talking about hover menu. This code i already used in mobile menu.

Check the screenshot

Please contact administrator
for this information.

#335541 Copied
Tony Rodriguez

Support staff

October 1, 2022 at 08:25
Hello, @Kazi Sabit,

Alright, Please navigate to the Dashboard >> XSTORE >> Theme Options >> Theme Custom CSS >> Global CSS >> and then paste the below code at the bottom of the CSS box.
```
.products-grid.row-count-6 .product-view-mask2 .footer-product .button{background:red !important;}
.footer-product .et-wishlist-holder a{background:red !important;}
.view-color-white .footer-product .show-quickly{background:red !important;}
```
Then save settings and check back to your site after clearing the browser cache.

The result will appear like this: https://postimg.cc/MMKVSbt9

Note: in the above code the word “red” is the color you can change it with the color name you want to set.

Regards 8Themes Team.
#335544 Copied
Kazi Sabit

Participant

October 1, 2022 at 09:30

The hover menu is covering my picture (thumbnail) I wanted the hover menu to be right edge as much as possible so that it covers the thumbnail as less as possible like before (checkout my 1st screen shoot) It happens in the mobile view only desktop view is fine.

Please contact administrator
for this information.

#335548 Copied

Kazi Sabit

Participant

October 1, 2022 at 09:43

.footer-product {
background-color: #e1e1e1 !important;
right: 5px;
}
.product-view-mask2 .footer-product .show-quickly:before,
.product-view-mask2 .footer-product .button:before,
.product-view-mask2 .content-product .wishlist-fragment a:before, .product-view-mask2 .content-product .yith-wcwl-add-button a:before {
font-size: 14px !important;
}

This code was working fine. Just background color not changing. Can you work on this code and see why not changing color?

#335549 Copied

Tony Rodriguez

Support staff

October 1, 2022 at 09:47

Hello, @Kazi Sabit,

Please provide me the login access to your site in the below-listed format in the private content area and allow permission to debug your site which includes deactivating all the third-party plugins and on-site Customization as well so that I will check and assist you accordingly.

WP Admin URL:
WP Admin Username:
WP Admin Password:

Note: Please take the complete backup of your site first.

Regards 8Themes Team.

#335551 Copied

Kazi Sabit

Participant

October 1, 2022 at 09:51

Please contact administrator
for this information.

#335552 Copied

Kazi Sabit

Participant

October 1, 2022 at 09:52

Rose gave me that code

#335553 Copied

Tony Rodriguez

Support staff

October 1, 2022 at 10:12

Hello, @Kazi Sabit,

Thanks for the login details. I have set the hover menu to the right side with the edge as you can see in this result image: https://postimg.cc/tZnrVXjL now please check back to your site after clearing the browser cache.

This is the code I added to make the hover menu to the right side: https://postimg.cc/dZ1GT6rD

Now, regarding the color issue, the thing is the code I shared with you this once: https://postimg.cc/BPGdS8Kh is working on your site but in the code, I set the red color as you can see in the image I underline the word red you can replace the word “red” with the color you want.

Regards 8Themes Team.

#335554 Copied

Kazi Sabit

Participant

October 1, 2022 at 10:58

I looking for transparent background. I have pit the code in the mobile css. Please don’t put it in global. Only mobile change enough.

How do i set background transparent

#335558 Copied

Kazi Sabit

Participant

October 1, 2022 at 11:00

Not fully transparent. About 90% transparent of white color.

In previous code given by ROSE i could change the color just by putting color code.

#335559 Copied

Kazi Sabit

Participant

October 1, 2022 at 11:04

And can you set 1 color code for the whole hover menu insted of 3 different background color for 3 button? Just like ROSE’s code

#335560 Copied

Kazi Sabit

Participant

October 1, 2022 at 17:22

Hello brother? Any update?

#335565 Copied

Kazi Sabit

Participant

October 2, 2022 at 04:16

How do i set color to semi transparent?

#335575 Copied

Tony Rodriguez

Support staff

October 2, 2022 at 09:14

Hello, @Kazi Sabit,

1. I have set the background transparent of white color on your site as you can see in this result image: https://postimg.cc/xJJqgw7v now please check back to your site after clearing the browser cache.

This is the code I added to make the hover menu background transparent: https://postimg.cc/Lnk92t1F
You can change the background transparent as per your needs.

Note: The opacity property can take a value from 0.0 – 1.0. The lower the value, the more transparent.

2. I have set a Single color code for the whole hover menu background color for 3 buttons as you can see in this result image:https://postimg.cc/sB9bqmQv now please check back to your site after clearing the browser cache.

This is the code I added to make the hover menu background color: https://postimg.cc/s1Z42XmJ You can change the background color as per your requirement.

Further, you can read this article: https://24ways.org/2009/working-with-rgba-colour/

Regards 8Themes Team.

#335592 Copied

Kazi Sabit

Participant

October 2, 2022 at 09:41

Brother i said Background Color transparent. But when i reduce transparent value the icon color disappeared. I dont want icon button to be transparent rathe Only the background transparent.

Please contact administrator
for this information.

#335596 Copied

Kazi Sabit

Participant

October 2, 2022 at 09:53

1. Background
2. Icon color

If i change transparency, it changes transparency for both which kind of fades the icon color. I wanted to change the transparency only for the background (1).

#335597 Copied

Tony Rodriguez

Support staff

October 3, 2022 at 06:10

Hello, @Kazi Sabit,

Alright, I have just set the background color to transparent. Check this image to know about the CSS code I added in the theme option to solve your issue: https://postimg.cc/dkT3629t and here is the resulting image from my personal mobile phone: https://postimg.cc/4YdJwvfk now please check back to your site after clearing the browser cache.

Regards 8Themes Team.

#335624 Copied

Kazi Sabit

Participant

October 3, 2022 at 06:20

I jave no transparency control now? I cant increase or decrease transparency?

#335626 Copied
Tagged: background, button, color, hover, position, templates, woocommerce, wordpress
1 2

Viewing 20 results - 1 through 20 (of 26 total)

The issue related to '‘I was given this code to position hover button in the right and change its background color but its’' has been successfully resolved, and the topic is now closed for further responses

I was given this code to position hover button in the right and change its background color but its

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection