Return to previous page

Mobile Menu Color Issues - by Nikita Desai

This topic has 12 replies, 2 voices, and was last updated 5 years, 8 months ago ago by Rose Tyler

Nikita Desai

Participant

March 26, 2019 at 10:30

I’d like the mobile menu of my site to have a transparent white background to match the desktop menu. Currently black and my fonts are not visible.

Also where can i change the hover color for my links? I want to change the links on the left sidebar to orange on hover in the applications page, products page etc. Setting typography > menu > hover and active colors did not work for me.

#211423 Copied Theme version: Woopress 4.5.3 WooCommerce version: Not using this for now

11 Answers
Rose Tyler

Support staff

March 26, 2019 at 10:43
Hello,

Thanks for contacting us.
Please add this code in Theme Options > Custom CSS > Global custom CSS:
```
.mobile-nav-heading.close-mobile-nav, .st-menu .nav-wrapper .st-menu-content {
    background-color:  white;
}
.sidebar-widget ul li:hover a,
.single-product .tabs .tab-title:hover  {
    color:  orange;
}
```
Regards
#211424 Copied
Nikita Desai

Participant

March 26, 2019 at 11:15

thanks both worked perfectly. Just wondering how do i change the hover color on the links created by the woocommerce product categories element as well in the home page.

#211425 Copied
Rose Tyler

Support staff

March 26, 2019 at 11:25
You’re welcome!
Please change this code http://prntscr.com/n326zn to:
```
.sidebar-widget ul li:hover a,
.single-product .tabs .tab-title:hover,
.product-categories > li > a:hover {
    color:  orange;
}
```
Regards
#211426 Copied
Nikita Desai

Participant

March 27, 2019 at 07:31

thanks! that partially worked
http://electronic-switches.in/products/ and pages like
http://electronic-switches.in/digital-counters-for-various-applications/
the hover is working

However, there are still two places where this change has not taken effect.

On the home page, the second section has a product categories list
https://prnt.sc/n3gtbp
which i am sending the screen shots of:
https://prnt.sc/n3gtq1
Here the orange hover doesn’t work on the side bar.
But the product grid, the font comes twice and the larger one is bold orange – can you help me turn that off. I only want the smaller text that is black and orange on roll over.

Also in the applications page http://electronic-switches.in/applications/
(screen shot of structure) again the orange hove code has no effect.
https://prnt.sc/n3gufw
here both the sidebar and posts title on roll over need to be orange
https://prnt.sc/n3gw4p
Can’t figure out where to make these changes in css or grid builder

Thanks again!!

#211484 Copied
Rose Tyler

Support staff

March 27, 2019 at 08:33
Thanks for screenshots.
Please replace the previous code by this one:
```
.sidebar-widget ul li:hover a,
.single-product .tabs .tab-title:hover,
.product-categories > li > a:hover,
.widget_categories a:hover,
.vc_custom_heading a:hover {
    color:  orange;
}
.home .products-page-cats a {
    display:  none;
}
```
clear cache and let me know the result.

Regards
#211491 Copied
Nikita Desai

Participant

March 27, 2019 at 12:06

No luck on either page.
On the home page, I am getting an underline on hover though which wasn’t there before.

.et-mobile-menu li a {
color: #fff;
}
.main-footer.text-color-light .widget-title{border-bottom:1px solid #555;}

.single-product .col-lg-3.product-information .email-link,
.single-product .col-lg-3.product-images .email-link {
display: none !important;
}

.product-information .email-link {
display: none !important;
}

is the only other custom css I have on the site.

#211508 Copied

Rose Tyler

Support staff

March 27, 2019 at 13:03

Hello,

Looks like the problem is caused by cache, because I do not see changes in code, via the console on your site.
Please clear all cache.

Regards

#211518 Copied

Nikita Desai

Participant

March 28, 2019 at 11:12

Thanks Rose
You were right, needed to flush the cache. I was only clearing the browser cache which was why the change wasn;t reflecting. All working perfectly as it should now. Great theme!

Last question before we go live:
/* unvisited link */
a.link_me:link {
color: #e57b34;
text-decoration: none;
}

/* visited link */
a.link_me:visited {
color: #e57b34;
text-decoration: none;
}

/* mouse over link */
a.link_me:hover {
color: #e57b34;
text-decoration: none;
}

/* selected link */
a.link_me:active {
color: #e57b34;
text-decoration: none;
}

I’ve put this code on the static block made for our custom footer. But it doesn’t seem to work. Any suggestions? I wanted the two links – one email one website to be orange irrespective of state, no underlines. They are still white though. text-transform has been applied in the links to keep them in lowercase additionally.

Appreciate all the help.
Nikita

#211602 Copied
Rose Tyler

Support staff

March 28, 2019 at 11:23
Hello,

Please add this code in Global custom css:
```
.main-footer.text-color-light a, .copyright.text-color-light a,
.main-footer.text-color-light a:visited, .copyright.text-color-light a:visited,
.main-footer.text-color-light a:hover, .copyright.text-color-light a:hover,
.main-footer.text-color-light a:active, .copyright.text-color-light a:active {
    color: #e57b34 !important;
    text-decoration: none;
}
```
Regards
#211603 Copied
Nikita Desai

Participant

March 28, 2019 at 13:10

Perfect! Thanks a lot Rose.
We seem sorted now to go live.

#211615 Copied

Rose Tyler

Support staff

March 28, 2019 at 13:18

You’re welcome!
Would you mind to rate our product: https://prnt.sc/d256m6 https://themeforest.net/downloads
That would be much appreciated ?

Regards

#211619 Copied
Viewing 12 results - 1 through 12 (of 12 total)