Is there any way to change the color of the menu selected? It automatically was purple when creating my blog. I would like it to be a light blush pink. I have the free Actively theme, so far I LOVE the theme just can’t seem to figure out how to change the menu color.
Hi @kylakanani,
I hope you are well today and thank you for your question.
You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.
Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS
#page .navbar-default .navbar-nav .current-menu-ancestor a.dropdown-toggle {
color: #B79732;
background-color: transparent;
}
#page .dropdown-menu>.active>a,
#page .dropdown-menu>.active>a:hover,
#page .dropdown-menu>.active>a:focus {
background-color: #B79732;
color: #fff;
}
Please change the color value in the above code to whatever you want to use by referring the following pages.
http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp
Best Regards,
Movin
Hi,
I was wondering if this code worked for you?
I tried it but the first category highlighted still remains purple. The rest is the same color. Not sure if I needed to change the color code elsewhere?
I’ve attached a photo.
Thanks,
Vanty
Please make sure you are using exactly the above shared CSS code.
Also could you please share me your site URL where it’s happening so that i can troubleshoot it?
Hi Movin,
Thanks for responding! My site url is vantyparadis.com, however the site is not live yet, will you be able to access it?
I’ve attached a screen shot of what I copied into the Customize css option. At first I changed both color code (circled in red and black) and that changed the particular page on the menu bar into grey. But then when I changed just the part circled in black, it gave me this cool gold color that I love! So I left the first color code as is and changed only the one circled in black.
It seems like the purple highlighted in the first subcategory is a default. The problem does not occur when I hover over other menu options under the first one.
Please let me know if I should put the website live in order to trouble shoot.
Thanks,
Vanty
If your site is not live yet then would you mind if i log in to your site and do some troubleshooting? If this is ok then could you please share me your site log in details privately by checking the option “Set as private reply” when replying to this topic?
Hi Movin,
I made the site live since there are a few questions I’ve asked in the forum. Please let me know if you can trouble shoot this way.
Many thanks,
Vanty
I accessed your shared site and found you are not using the above provided CSS code exactly on your site. The custom CSS code on your site contains some issues as shown in the attached screenshot so to resolve the issue please exactly use the above provided CSS code on your site and then change the color value in it.
Awesome!!! Thanks Movin! I don’t know how that period got in there!!
You are most welcome here 
Hi,
I have the same problem but I’m not able to understand why your solution doesn’t work for me.
I’m trying with this code:
#page .navbar-default .navbar-nav .current-menu-ancestor a.dropdown-toggle {
color: #B79732;
background-color: transparent;
}
#page .dropdown-menu>.active>a,
#page .dropdown-menu>.active>a:hover,
#page .dropdown-menu>.active>a:focus {
background-color: #B79732;
color: #fff;
}
but it doesn’t work.
Hey Mikester,
I hope you’re doing well today
You can try the following code to change the color of the menu.
/*Active main menu*/
.navbar-default .navbar-nav> .active> a{
color:red;
}
/*main menu color hover*/
.navbar-default .navbar-nav> li> a:hover{
color:yellow;
}
/*active main menu hover*/
.navbar-default .navbar-nav> .active> a:hover{
color:black;
}
/*dropdown menu hover*/
.navbar-default .navbar-nav a:hover{
color:white;
background:black;
}
/*Active drop down*/
.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus{
color:yellow;
background:black;
}
Best Regards,
Support
It’s working!
Thank you very much.
Best Regards
You are always welcome here
Hi, Movin. Sorry to bother you but I’m having the same problem and no clue how to fix it.
I copy/paste the first code on css but nothing changes.
How can I change the purple for other color?
Thanks in advance!
Laura
Hey Lauitoero,
I hope this message finds you well.
Please share the URL to your website so we can have a look at the issue for you.
Best Regards,
Support
You can change that drop down menu hover color by adding the following CSS code in the Custom CSS option of your theme on the below path.
Admin Area -> Appearance -> Customize -> Additional CSS
.dropdown-menu> li> a:hover,
.dropdown-menu> li> a:focus,
.navbar-default .navbar-nav .open .dropdown-menu> li> a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
color: #fff;
background-color: #000;
}
You can change the color value in the above code to whatever you want to use by referring the following pages.
http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp