Change color of menu

harmonyclinics · Member · Feb 1, 2016 at 5:29 pm
Copy link

Add topic to favorites
Hi. I am needing assistance on how to change the color of the menu. The theme I am using is Dynamic News. Any suggestions would be greatly appreciated!

The blog I need help with is: (visible only to logged in users)
staff-zinnia · Staff · Feb 1, 2016 at 6:20 pm
Copy link
This is the custom colors support page
https://en.support.wordpress.com/custom-design/custom-colors/

Use this link to build your site color pallet.
https://harmonyintegrativemedicine.wordpress.com/wp-admin/customize.php?return=https%3A%2F%2Fharmonyintegrativemedicine.wordpress.com%2Fwp-admin%2F

Another option, if you are on Premium or Business plan, is to use the CSS code feature. If this is something you are interested in learning about, there is more information in the CSS Customization Forum https://en.forums.wordpress.com/forum/css-customization
timethief · Member · Feb 1, 2016 at 6:31 pm
Copy link
@harmonyimc
You have posted in the CSS editing forum where Volunteers and Staff provide support. Please be patient while waiting for the specific CSS code changes for the menu bar. What is the color that you want the menu bar to be?
thesacredpath · Member · Feb 2, 2016 at 5:33 am
Copy link
Hi there, I’m seeing multiple colors on your menu right now. Have you gotten this resolved? If not, let me know.
harmonyclinics · Member · Feb 3, 2016 at 2:48 pm
Copy link
Thanks to all for your responses! We’ve resolved the main menu color change, however still need help with the submenu items. Our desire is for the submenu items letters to match the color of the main menu. For example, Cosmetic and Aesthetic submenu items will have pink letters and Integrative and Functional Medicine submenu items will be in green. Any help is greatly appreciated!!!
thesacredpath · Member · Feb 3, 2016 at 8:47 pm
Copy link
We can do that, but first a question. If I hover one of the submenu items on Cosmetic, the background of the menu item changes to pink, so I’m thinking you aren’t wanting it pink on pink. Do you want the text in the submenu pink until you hover it and then have it go to white? Let me know and we can get this done for you.
harmonyclinics · Member · Feb 3, 2016 at 10:51 pm
Copy link
Actually the hover background can remain pink, regardless of the tab. It’s the colors of the letters that need to be changed to correspond with the tab.
thesacredpath · Member · Feb 4, 2016 at 7:47 am
Copy link
Ok, we have two situations. First If I open a submenu, but I do not run my mouse down over the submenu items, the background is white with dark text. If I hover over a submenu item, the background goes pink, but the text stays dark. I can change the text color on the submenu items when hovered to white, but I can’t when the submenu background is white otherwise you would not be able to see them.

I can most certainly help get you where you want to be, but let’s get it figured out exactly what you want.

My suggestion:
1. Set background of submenus (when not hovered to the same pink as the top menu item.
2. Set text to white on submenu items.

This would be the code.
```
#menu-item-1887 ul.sub-menu {
    background-color: #ce5686;
}
#menu-item-1887 ul.sub-menu a {
    color: #fff !important;
}
```
If that works and is acceptable to you, then you can use that as a guide for creating the CSS for the green menu item.
lucette63 · Member · Feb 4, 2016 at 10:46 am
Copy link
Hi,

I have read some tutorials about changing colors of menus.
But it seems really complicated.

I am needing assistance on how to change the color of my menu when my mouse is over. My theme is Dyad.

The blog I need help with is http://bloglucette.com

I am also needing assistance on how to change the color of the background of my submenus which is actually grey.

The blog I need help with is bloglucette.com

I am so sorry, it seems to be the same question but I am really a debutant would you mind, giving me a CSS code ?
harmonyclinics · Member · Feb 4, 2016 at 6:00 pm
Copy link
Thank you, thesacredpath, that worked like a charm!

Is there any way to do the same for the widgets: Weight Loss header green, Comprehensive Skin Care header pink, and IV Nutrition header green?
thesacredpath · Member · Feb 4, 2016 at 6:59 pm
Copy link
Widgets also have a unique CSS id you can use to target styling which can be found in the source code. For example, this is the opening HTML tag for your widget titled Weight Loss
<aside id="image-5" class="widget widget_image">
To change the title background color on that widget we would do this. Just to note, in case you don’t know, when you see id= that is a CSS id, which is preceded with a # in the CSS. Where you see class= that is a CSS class and would be preceded with a period ( . ).
```
#image-5 .widgettitle {
    background-color: #586e2e;
}
```
You can use that as a guide to change the colors of the other widget titles. Let me know if you run into problems.
harmonyclinics · Member · Feb 4, 2016 at 8:10 pm
Copy link
Thank worked perfectly too! Thank you again for all your help and the input. I hope to learn more in the future.

You’ve been a great help!!!
thesacredpath · Member · Feb 4, 2016 at 11:59 pm
Copy link
You are welcome.

No items found.