I am trying to change the text color of my current menu item as on hover its green but the background is green so I want the color to be white on hover but it does not seem to want to work, to view hover over the selected page on 'our products'

website link

li.current-menu-item a:hover{
color:white !important;

2 Answers 2


I just checked your website and found some helpful CSS for your site.
Find this line of CSS and change your color code, it will surely work.

For menu hover and focus ('Use this CSS in bedcentregrimsby.css')

 .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
        color: #a4cb9a;

Please feel free to quote. Thanks, Cheers..!!


In general it's not a good practice to style with !important attribute in CSS. You should try to avoid it.

You will need to find with your browser inspector which CSS rules exist to color your link on hover.

You can find information about how CSS rules overwrite them selves and what rule get's specified in the end: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

E.g.: You already have a hover state style for the link which could override your white color style:

.navbar-nav a:hover, .dropdown-menu>li>a:hover {
    color: #a4cb9a !important;

in http://beta2018.bedcentregrimsby.co.uk/wp-content/themes/BedCentre2/css/bedcentregrimsby.css?ver=4.9.8 at line 1006

  • I removed important and looked at this line the text is still green on hover: .navbar-nav a:hover, .dropdown-menu>li>a.active:hover { color: white; }
    – Jenova1628
    Oct 30, 2018 at 10:21
  • you will need to remove all other hover styles for this link. would be best when you only have one rule for this case. which can be difficult. Oct 30, 2018 at 10:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.