# Roll over Menu colours

**URL:** <https://colorlibsupport.com/t/roll-over-menu-colours/19383>\
**Category:** Shapely\
**Created:** [December 13, 2017, 10:20am UTC](https://colorlibsupport.com/t/roll-over-menu-colours/19383 "2017-12-13T10:20:05Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![pablohoney](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/p/7feea3/32.png) [@pablohoney](https://colorlibsupport.com/u/pablohoney)\
**Post date:** [December 13, 2017, 10:20am UTC](https://colorlibsupport.com/t/roll-over-menu-colours/19383/1 "2017-12-13T10:20:05Z")

</div>

Hi there

I am having trouble with my rollover/hover states.

When hovering over an element the background changes colour great but the text becomes the same colour as the background.

Rollover the ‘about us’ and ‘contact’ element of the ‘About Us’ menu item on - [https://mka-architects.co.uk/wp](https://mka-architects.co.uk/wp)

And see attached.

Thanks!

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [December 13, 2017, 10:55am UTC](https://colorlibsupport.com/t/roll-over-menu-colours/19383/2 "2017-12-13T10:55:17Z")

</div>

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the hover font color by going to Appearance \> Customize \> Additional CSS and pasting it there.

```auto

#page .menu > li > ul li a:hover, #page .btn.searchsubmit, #page .image-bg .btn.btn-filled {
    color: white;
}

```

Best Regards,  
Support