CSS to change set background of active nav menu page

Question

I have this website of http://camerabeanbags.co.uk/test and on the top Nav Menu you can see when you hover over the text on the menu a grey background shows behind the text.

What CSS code can i use to have the grey background show behind the active page? So if i am on the Home page then a grey background shows behind the home page text on the menu?

Thanks,

Harvey

score 0 · Answer 1 · answered Jul 17 '17 at 13:16

0

You could use:

li.current-menu-item:hover > a {
  background: #e8e8e8;
}

answered Jul 17 '17 at 13:16

Neil K

1,318
1
14
23

Tom · Accepted Answer · 2017-07-17T14:37:39.553

0

No need to add background or anything to your code.

li.current-menu-item a,
nav a:active,
nav a:focus {
  color: #406639 !important;
}
li.current-menu-item a:before,
nav a:active:before,
nav a:focus:before {
    transform: scaleX(1);
}

This would trigger default style that you have for hover state.

EDIT: I have updated Answer with full thing that you need. :) Note that I had to add Important as you have important on this selector:

a:focus {
 color: #c9c9c9 !important;
 text-decoration: none;
}

edited Jul 17 '17 at 14:37

answered Jul 17 '17 at 13:19

Tom

349
1
7

Hi this code works perfect, How would i be able to set the text on the active menu page to be green as well like it is when hovering? – Harvey Jul 17 '17 at 13:33
Hey Harvey you can easily add `li.current-menu-item a { color: #406639;}` that should do the trick – Tom Jul 17 '17 at 13:35
Yep thats perfect thanks, any ideas on how it can be set so when a menu item is clicked it goes to the colours it will be when active. The grey background with green text? And then it will be perfect :) – Harvey Jul 17 '17 at 14:06
Hi, Yep that is great, thanks for all the help... any good sites or ways i can learn all this stuff as i only know the basics :( – Harvey Jul 17 '17 at 15:24
No problem :) definitely one of the best sources related to WordPress is https://codex.wordpress.org/ also I would recommend read through https://www.w3schools.com/css/ :) everything else just ask Google :P – Tom Jul 17 '17 at 15:31

score 0 · Answer 3 · answered Jul 17 '17 at 13:30

As i can see you used ::before as background effect which is on hover... To make it in active state you can use:

nav li.active a:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: #e8e8e8;
transform: scaleX(0);
transition: transform .25s;}

Also, need to add active class with li

CSS to change set background of active nav menu page

3 Answers3