How do I customize the way a current page name looks in my menu?

I am trying to customize the menu on my wordpress theme to have a different color for the name of the page that the user is currently on.

Right now my css looks like this (it works for all the page names EXCEPT the current one) –

.navbar-nav li a {
    font-family: georgia;
    font-color: #e7a0c0;
    background-color: #e7a0c0;
}

this is how it looks right now. I want “about me” to have the pink BG instead of the grey and for the rest to be white. I’m also not able to change the color of the text for some reason even though I can change the font and everything else.

Use this

li.current-menu-item a {

font-family: georgia;
font-color: #e7a0c0;
background-color: #e7a0c0;

}

In your HTML menu items, you will find that the active class is “.current-menu-item”.
If no try to use WordPress built-in function for showing menu:

wp_nav_menu( array $args = array() )

I want “about me” to have the pink BG instead of the grey

In your CSS file, add this:

.navbar-nav li.current-menu-item a{
   background-color: #e7a0c0;}

and for the rest to be white

.navbar-nav li a{
   background-color: #fff;}

I’m also not able to change the color of the text for some reason even though I can change the font and everything else.

This is because you are using font-color instead of color, so use this instead

.navbar-nav li a {
  font-family: georgia;
  color: #e7a0c0;
  background-color: #fff;
}