How to change first letter of active menu item

Question

Hello can anyone please give me the code, and tell me where to put it, for how to the change the first letter or the active menu item to red?

thank you

Answer 1

1. CSS ::first-letter

The first option is selector CSS ::first-letter.

li.menu-item.active a::first-letter {
  color: red;
}

The a tag inside menu should have display: block / display: inline-block.

Note: The ::first-letter selector can only be used with block-level elements.

2. Filter nav_menu_item_title

Another way is to use nav_menu_item_title filter and surround the first letter with an tag with CSS class.

add_filter( 'nav_menu_item_title', 'se337090_first_letter', 30, 4 );
function se337090_first_letter( $title, $item, $args, $depth )
{
    if ( $item->current )
    {
        //
        // after application of this filter, there is the concatenation:
        //   $item_output .= $args->link_before . $title . $args->link_after;
        $first_letter = substr( $title, 0, 1);
        $title = substr($title, 1);
        $args->link_before .= sprintf( '<span class="menu-item-first-letter">%s</span>', $first_letter );

        // but you can also add changes to the title:
        //   $title_end = substr($title, 1);
        //   $title = sprintf( '<span class="menu-item-first-letter">%s</span>%s', $first_letter, $title_end )
    }
    return $title;
}

Answer 2

You can use CSS to change the first letter of a 'div' (class or element). See https://www.w3schools.com/cssref/sel_firstletter.asp .

That link (and others found with a simple googles of 'CSS change first letter of div' ) will get you started.

CSS stuff is not really a type of question that is supported here. But the googles/bings/ducks are your friend...