How to change header background colour on hover?

Hi, i want to change my header background colour, but ONLY on hover (only when i point mouse on header). Unfortunately there is no settings for that in woodmart theme options. Can You provide me a CSS code for that?

Hello,

Firstly, sorry to say but the Header as a whole doesn’t work on Hover. It works with and without Sticky.

So, you can try using the following Custom CSS on your Site to specifically change the background color of the Sticky Header:

.whb-color-dark:not(.whb-with-bg) {
   background-color: red !important;
}

In this CSS, you can change the color from red to your choice.

Location to paste Custom CSS, go to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section >> paste the CSS.

Best Regards.

Thanks for help!

I have another question: how can i change image size in mobile cart page? I have thumbnail there, but they are cropped.

I have treid this:

@media (max-width: 768.98px)
:is(.woocommerce-cart-form__contents,.group_table) td.product-thumbnail {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
margin-bottom: 0;
padding-bottom: 0;
max-height: 150px;
border-bottom: none;
border-radius: calc(var(–wd-brd-radius) / 1.5);
}

but it didn’t worked

Hello,

Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Custom CSS for mobile section:

:is(.woocommerce-cart-form__contents,.group_table) td.product-thumbnail img {
    min-width: 50px !important;
    max-width: 50px !important;
}

In this CSS, you can change the values according to your choice but remember to have the same values for both mentioned properties.

Best Regards.

Hi, it doesn’t work 🙁

Head an feet are still cropped (screen below)

Attachments:

You must be logged in to view attached files.

Hello,

The issue that you have asked of through the Screenshot now is from a different Site then the shared Site in this Topic. So, we have checked that other Site that you have shared in Screenshot and on that please try using the following Custom CSS on your Site and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:

:is(.woocommerce-cart-form__contents,.group_table) td.product-thumbnail {
   overflow: visible !important;
}

:is(.woocommerce-cart-form__contents,.group_table) td.product-thumbnail img {
   margin-top: 1em !important;
}

If still doesn’t work out for you then 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.

Hope this helps !

Best Regards

It works, thanks!

Another questions:

1. In mobile menu, how can i disable grey dividers between menu items?

2. In mobile quick cart, how can i disable “close” text? I want to left only “X” mark

3. In mobile menu, how can i disable my account icon? I want only text

4. In “thank you page” the text color is green, how can i change it to black color?

Hello,

1- To disable the dividers between the Menu Items for Mobile Menu, please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Custom CSS for the mobile section:

.wd-nav-mobile li a {
    border-bottom: none !important;
}

2- Sorry to say but that wouldn’t be possible because the “X” close icon and Close text both appear in the same anchor container which is why it wouldn’t be possible to specifically hide Close text.

But a CSS alternative can be tried in this regard if it works out for you. Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Custom CSS for the mobile section:

.close-side-widget.wd-action-btn.wd-style-text.wd-cross-icon {
    width: 5% !important;
}

.close-side-widget.wd-action-btn.wd-style-text.wd-cross-icon>a {
    color: #fff !important;
}

.close-side-widget.wd-action-btn.wd-style-text.wd-cross-icon>a:before {
    color: #333 !important;
}

3- Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Custom CSS for mobile section:

.wd-nav-mobile .menu-item-account>a:before {
   display: none !important;
}

4- Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:

.woocommerce-thankyou-order-received {
    color: #000 !important;
    border-color: #000 !important;
}

In this above CSS, you can change the color from #000 black to your choice if you want. We have also added the border-color in it because there is a border there too in green color. So, if you don’t want to change that just remove this property from the CSS.

Hope this helps !

Best Regards

Thank You, everything works perfect!

I have another question:

When i click on different pages on my website, my logo in header seems to “blink” for a micro second. How can i make logo more static and not blinking? (url below)

Hello,

Sorry to say but as you know with any of the Page links being clicked, the Page gets loaded so every item on the page gets loaded too which is why the Logo Image also gets loaded and you are seeing that blink of seconds. Unfortunately, there isn’t a separate option available to control that and this is how it works.

Further, if you want to try, you can try out the following Custom CSS on your Site if it helps somehow:

.wd-logo img {
	animation: none !important;
}

Location to paste Custom CSS, go to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section >> paste the CSS.

Best Regards

[Author]

Posts