Archived topic
Change a theme's color
7 replies · Started by Manuela on February 5, 2021
Hello,
Could you please let me know how I can change the purple that comes with the site I imported: Vinyasa.
I now see that specific purple when:
- I view my website from mobile, I press on the menu and the menu items display on screen
- when I scroll down on pages (desktop and mobile) and a little square with a arrow appears on the right, so I can quickly go to the beginning at the page. That square is the purple I'd like to change.
I'd like to change this color to something that fits the color scheme of my site better.
Thank you,
Hi there,
you can use this CSS:
#generate-slideout-menu.main-navigation .main-nav ul ul {
background-color: #f00;
}Hi again,
Thank you for your reply!
I went to Appearance-Customize, Simple CSS and Additional CSS, added the code and nothing seems to be happening.
Could you please further assist me with this?
However, I just discovered how to change the color of my menu on mobile and tablet. I just need help changing the color of the square that helps me get to the top of the page.
Thank you,
Hi ,
The CSS is working, this is what I see. Clear your browser cache, or open the site in an incognito window.
https://www.screencast.com/t/fhyh9R9o
You could use this CSS to change the background color of the scroll back to top icon.
body a.generate-back-to-top {
background-color: #000;
color: #eee;
}Let me know :)
Hi Ying,
Thank you for your help!
I managed to change the scroll back to top icon's main color. But when I hover over, I still see the purple I want to change. Could you please tell me how I can change that as well?
Thanks a lot
You are welcome, and this is how you apply CSS to hovered elements :)
body a.generate-back-to-top:hover {
background-color: #000;
color: #eee;
}Hi Ying.
Thank you very much!
As always, amazing support
Hi Manuela,
You are welcome!
Actually you can change the color at Customizing > Colors > Footer >Back to Top Button instead of adding CSS.
It's definitely a better this way!
