how can I change specific menu item text colour? background changing but text colour not changing?

Question

I have used following CSS codes in order to change specific menu item background and text color in an wordpress site. After applying the code, Background color has been changed but text color not changing. Can anyone help me please to make it work. My CSS codes are as follows which I have used (please note that same code I have used in different website that worked):

/*RESERVATION MENUBAR*/
.reserve-menu {
    background-color: #dd0000;
    color: #fff;
    }

.reserve-menu:hover,
.reserve-menu:focus,
.reserve-menu:active {
    background-color: #262626;
    color: #fff; !important;
    }

I have applied above code in this site. please see there is a Menu called "RESERVATION": https://www.bombaydininghenley.co.uk/

In `color: #fff; !important;`, remove the semi-colon in the middle... --> `color: #fff !important;` — Louys Patrice Bessette, Jul 16 '18 at 01:19
@LouysPatriceBessette, Thank you for your reply. I have done this but didn't work. I tried also by removing important. Still remained same. :( — SAYED RAHMAN, Jul 16 '18 at 01:43

score 1 · Answer 1 · answered Jul 16 '18 at 02:26

1

You need to target the anchor tag for the color to work. Try something like this

 .reserve-menu a{
     color: #000;
 }

answered Jul 16 '18 at 02:26

James Hector Ayensu

11
2

Thank you. I am stupid, I missed the stupid "a" to write after .reserve-menu. I have been changing everything but I didn't notice this. I really appreciate. – SAYED RAHMAN Jul 16 '18 at 03:22
Your welcome! Make sure you mark an answer as solved so people know. – Luay Jul 16 '18 at 03:27
I have one more issue, after applying border on hover onto the same menu item, it is keep pushing other menu item left. For border on hover I have used this code: border: 2px solid #dd0000; I would be grateful if you can give me any suggestion please. Thank you – SAYED RAHMAN Jul 16 '18 at 03:40

score 0 · Accepted Answer · answered Jul 16 '18 at 01:46

0

It's just your selector not enough specificity It should be

#main-menu ul li a:hover

or

.reserve-menu a:hover

The current selector you're using to set color is #main-menu ul li a The element is being affected by css file asian.css and its selector is .dark a:hover

answered Jul 16 '18 at 01:46

Toan Lu

1,169
2
13
27

Thank you for your reply. I applied both but it didn't work. Yes you are right it is default by theme but I wanted to change by force and expected should work. Unfortunately, none worked. :( #main-menu ul li a:hover .reserve-menu a:hover – SAYED RAHMAN Jul 16 '18 at 01:56
try this one `#main-menu ul li .reserve-menu a:hover { color: #FFF; }` I think it should work, otherwise you may set the this line of css somewhere before other rules. Which file do you added to? – Toan Lu Jul 16 '18 at 01:58
I applied this as well, unfortunately it didn't work too :( – SAYED RAHMAN Jul 16 '18 at 02:04
I applied on your site & it works well. Not sure what did you do though. – Toan Lu Jul 16 '18 at 02:05
Let me give send you that what I have written: /*RESERVATION MENU BAR*/ .reserve-menu { background-color: #dd0000; color: #fff; } #main-menu ul li .reserve-menu a:hover .reserve-menu:focus, .reserve-menu:active { background-color: #262626; color: #fff; border: 2px solid #dd0000; } – SAYED RAHMAN Jul 16 '18 at 02:13
You need to add a , after a:hover – Toan Lu Jul 16 '18 at 02:37
Thank you. I am stupid, I missed the stupid "a" to write after .reserve-menu in the first paragraph and I have been concentrating second paragraph. I have been changing everything but I didn't notice this. I really appreciate for your support. I wouldn't notice until @James Hector Ayensu noticed this. Thank you once again – SAYED RAHMAN Jul 16 '18 at 03:25
I have one more issue, after applying border on hover onto the same menu item, it is keep pushing other menu item left. I would be grateful if you can give me any suggestion please. Thank you – SAYED RAHMAN Jul 16 '18 at 03:30
border Issue has been solved as well. I used "outline". Thank you for your help. – SAYED RAHMAN Jul 16 '18 at 04:00
@SAYEDRAHMAN ok, that's great. I was investigating the border method :D – Toan Lu Jul 16 '18 at 04:03

Luay · Answer 3 · 2018-07-16T02:17:15.930

0

Add this to the Style.css file:

.reserve-menu a:hover {
    color: #fff !important;
}

This will keep it as #fff the entire time.

edited Jul 16 '18 at 02:17

answered Jul 16 '18 at 02:11

Luay

789
4
15

Thank you for your comment. I tried this as well but it didn't work unfortunately :( – SAYED RAHMAN Jul 16 '18 at 02:24
@SAYED RAHMAN Where exactly are you placing this? I haven't used wordpress in a while but I might catch something. – Luay Jul 16 '18 at 02:25
@SAYEDRAHMAN I don't know exactly how wordpress allows you to choose your style link tags, but try to reorder them so that it calls custom_theme.css first then style.css. Also are you clearing cache so it shows on the website? – Luay Jul 16 '18 at 02:30

how can I change specific menu item text colour? background changing but text colour not changing?

3 Answers3