Change the menu items from uppercase to capitalize in Hestia

In this guide you will learn how to change the default `text-transform` property of the menu items in Hestia.

Keep in mind that Hestia supports 3 menu areas. In this guide will be addressing each one.

Primary Menu
Footer Menu
Top Bar Menu

First of all, let's learn what text-transform does. text-transform is a CSS property which converts the text into:

lowercase makes all of the letters in the selected text lowercase.
uppercase makes all of the letters in the selected text uppercase.
capitalize capitalizes the first letter of each word in the selected text.
none leaves the text's case and capitalization exactly as it was entered.

Primary Menu

By default, Hestia's menu items are set to uppercase :

In order to change this behaviour, we can alter this property by adding a short CSS snippet to Appearance -> Customize -> Additional CSS:

.navbar .navbar-nav>li>a {
   text-transform: capitalize;
}

This code will capitalize only the first letter of each menu item while the rest are set to lowercase:

Furthermore, you can edit the capitalize part of the code above into anything according to your preferences. For instance, let's say I want to make all the items lowercase. The code for that would be:

.navbar .navbar-nav>li>a {
   text-transform: lowercase;
}

Footer Menu

This is similar to what we have already covered for the Primary Menu. The process is basically the same, and such are the properties. The only difference is that we need to make sure that the CSS code will address the footer menu area this time. The code for changing the footer menu items is:

.footer .footer-menu > li > a {
    text-transform: capitalize;
}

The results are:

Very Top Bar Menu

The process of changing the text for the Very Top Bar menu is similar to what we have covered so far for the Primary Menu and Footer Menu. Again, the difference stands in the way we are selecting only the Very Top Bar Menu text, so the code here is:

.hestia-top-bar ul li a {
   text-transform: capitalize;
}