- This topic has 21 replies, 2 voices, and was last updated 5 years, 12 months ago by
.
-
Posts
-
Hi, i would like to change the the base color when the cursor highlights the link.
Right now it’s #f5245f
I understand that it can be done via the CSS style but would like more detail advice on how to get it done.
Any help is much appreciated!
Please see attached screenshot.
Hello @streetdogsociety,
To change the color of the link in the primary menu section use below given CSS.
For this go to Admin Panel > Appearance > Customize > Additional CSS and paste below given CSS.
.main-navigation li > a:hover, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_item > a, .main-navigation li:hover > a { background-color: #009688; }You can change the color code as per your requirement.
Hope this helps.
Best Regards!!
Hi, thank you it works.
Would you also be able to assist with with changing the highlighted link to another color as well?
When the cursor went over, it shows as red, would like to change to another color.
Much appreciated!
https://imgur.com/a/YPSjC as attached.
Hello @streetdogsociety,
To change the icon as you have mentioned, please use below given CSS.
.home-section-portfolio .portfolio-item .popup-link { background: rgba(36, 90, 245, 0.8) none repeat scroll 0 0; }Here change the rgb color as per your requirement.
Hope this helps.
Best Regards!!
Hello @streetdogsociety,
Please replace the above given CSS with the CSS given below.
.home-section-portfolio .portfolio-item .popup-link{ background: #ffd700 none repeat scroll 0 0; }Please change the color code as per your requirement.
Hope this helps.
Best Regards!!
Hi, it still doesn’t show.
Now my custom CSS is
.home-section-portfolio .portfolio-item .popup-link{ background: #b19c93 none repeat scroll 0 0; } .main-navigation li > a:hover, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_item > a, .main-navigation li:hover > a { background-color: #b19c93; }Any help is very much appreciated!
Hello @streetdogsociety,
The CSS that we have provided above is working absolutely fine as you can see in below-given screenshots:
So please can you post your site URL so that we could see what exactly your issue is?
Thank you.
Best Regards!!
Hi, my URL is http://www.streetdogsociety.com
Weird, it don’t work for me. Could it be my cache? Or i miss out something?
My additional CSS
.home-section-portfolio .portfolio-item .popup-link{ background: #ffd700 none repeat scroll 0 0; } .main-navigation li > a:hover, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_item > a, .main-navigation li:hover > a { background-color: #b19c93; }Hello @streetdogsociety,
We found that you not added the additional CSS in your theme.
So please go to Admin Panel > Appearance > Customize > Additional CSS and paste below given CSS.
.home-section-portfolio .portfolio-item .popup-link{ background: #ffd700 none repeat scroll 0 0; }Screenshot:
Also, make sure to clear your cache as well.
Hope this helps.
Best Regards!!
Hi, i’ve cleared my clear and input exactly what you have adviced me to but somehow it is not showing.
Cos it be the first CSS code that i have that is messing things up?
Please see screenshots.
Hello @streetdogsociety,
Could you please replace the Custom CSS provided with the one below for testing purposes :
.popup-link{ background: #ffd700 none repeat scroll 0 0!important; } #main-nav li > a:hover, #main-nav li.current-menu-item > a, #main-nav li.current_page_item > a, #main-nav li:hover > a { background-color: #b19c93!important; }Best Regards !!
Hi, i have done the changes to the customizing addition CSS as advised.
It shows now as in screenshot 1
but then my mouseover on the links on the top reverted back to the original color as shown in screenshot 2.
Also when inputting the new CSS you provided, an alert popped up stating there’s a break in the CSS code.
Please advise. Any help is very much appreciated!
Hello @streetdogsociety,
We will provide the block of CSS code that will change every pink color to the golden color.
For this activate the child theme.
You can even simply activate the child theme using the plugin given below:
https://wordpress.org/plugins/wp-child-theme-generator/
After activating the child theme in your child themes style.css paste below given CSS.
https://gist.github.com/Steeru/60e71642f80b9bb010fb2636d31010de
Hope this helps.
Best Regards!!
- You must be logged in to reply to this topic.
