Change colour of menu titles

lostfound38 · Member · Oct 28, 2016 at 11:29 pm
Copy link

Add topic to favorites
I would like my menu bar colour to be white and the menu titles in the menu bar and on each page to be black.

I’ve tried to change this via customize but it isn’t really working and there appears to be a different colour from the desktop version and the mobile version.

Please help

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 31, 2016 at 8:21 pm
Copy link
Hi there, add the following to your custom CSS.
```
#navigation {
    background-color: #fff;
}
#navigation .menu a {
    color: #000;
}
```
Let me know if there are additional changes you want to make to the menu. After the above, it uncovers some additional styling elements on the menu that were not visible when it had the black background.
paraderingmarketing · Member · Oct 31, 2016 at 9:11 pm
Copy link
Hi there! I would love it so that, when people hover their mouses over my menu (such as on the services page), it is the same dark grey background and white text as the rest of my menu. Could someone please help me with that code? Thank you so much!
thesacredpath · Member · Oct 31, 2016 at 10:55 pm
Copy link
Hi, I’m not seeing a Services page on your site, and don’t see one as a draft in your list of pages. Can you clarify which page you are talking about?
lostfound38 · Member · Oct 31, 2016 at 11:51 pm
Copy link
Hello there!

In response to my menu bar colour request above, the CSS code you have me works and looks great on the desktop version but terrible on my iPhone. On my iPhone everything is white thus making it difficult to read the menu bar titles.

I hope this makes sense?

Thanks for helping me
thesacredpath · Member · Nov 1, 2016 at 6:39 pm
Copy link
Oops, yes I see what you mean, and sorry about that. We have a couple of options. First would be to use a Media Query and limit the menu color change to only desktop/laptop sized screens (those over 768px) and allow things to go back to the original design when the touch menu activates at 767px and narrower. This would be the code for that.
```
@media screen and (min-width: 768px) {
#navigation {
    background-color: #fff;
}
#navigation .menu a {
    color: #000;
}
}
```
The other would be to keep things as you have requested for the mobile touch menu also. This would be the code for that.
```
#navigation {
    background-color: #fff;
}
#navigation .menu a {
    color: #000;
}
.menu-toggle, .menu-toggle::before {
	color: #000;
}
.mobile-menu a {
	color: #000 !important;
}
```
paraderingmarketing · Member · Nov 1, 2016 at 10:00 pm
Copy link
Hi,

http://www.paraderingmarketing.com

At the top, the services tab has a menu… the drop down colour is white, whereas on the mobile version of my site it is grey. It looks so much more cool.

Image in my folders.

Many thanks. Losing my min with it.
thesacredpath · Member · Nov 1, 2016 at 10:07 pm
Copy link
@paraderingmarketing, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.

No items found.