How to change the color of menus in a template

This article will explain how to change the font color in a WordPress template using a browser’s Item inspector. For this change it will not be necessary to install any plugins. You will modify the code in the template that is used in WordPress and it will be a manual change. You don’t need to know how to program, you will work with the tools provided by the browser.

Working with the TwentyTwenty template

For this demo we have worked with the TwentyTwenty  WordPress template. It is an official template that provides the WordPress content manager itself.

In Mozilla Firefox browser we go to  Tools > Web Developer > Inspector. What we are going to do is change the top horizontal menu, the main menu of the website so that instead of having the default color have another one that we choose.

Once the inspector is opened, click the arrow at the top left to select an item. Once the item is selected we see the following information:

The code for that block iw where the color #cd2653 comes from from as seen in the inspector.

body:not(.overlay-header) .primary-menu > li > a, body:not(.overlay-header) .primary-menu > li > .icon, .modal-menu a, .footer-menu a, .footer-widgets a, #site-footer .wp-block-button.is-style-outline, .wp-block-pullquote::before, .singular:not(.overlay-header) .entry-header a, .archive-header a, .header-footer-group .color-accent, .header-footer-group .color-accent-hover:hover {
    color: #cd2653;
}

Change the color to another one that we choose in the template

Once you locate the block that handles the color of that menu we can already go to our template within the management of our WordPress page. We move to Appearance and  in the template that we want to modify click on  Customize.

Once within the customization we choose the option of Additional CSS.

Now we use the code we saw in Fig. 3 and that’s where we change the color and put the one we want, for example the color # using this code:

.overlay-header .header-inner.is-sticky {
    background-color: #4C3C35;
}

#site-footer {
 background-color: #4C3C35;
}


body:not(.overlay-header) .primary-menu > li > a, body:not(.overlay-header) .primary-menu > li > .icon, .modal-menu a, .footer-menu a, .footer-widgets a, #site-footer .wp-block-button.is-style-outline, .wp-block-pullquote:before, .singular:not(.overlay-header) .entry-header a, .archive-header a, .header-footer-group .color-accent, .header-footer-group .color-accent-hover:hover {
    color: #BC967A;
}

.color-accent, .color-accent-hover:hover, .color-accent-hover:focus, :root .has-accent-color, .has-drop-cap:not(:focus):first-letter, .wp-block-button.is-style-outline, a {
    color: #BC967A;
}

The final result can be seen in the following figure:

The CSS Style Sheet

The style sheet of the template that is active in WordPress is therefore modified. CSS style sheets are a series of commands that we place in the template source code to tell the browser what we want our page to look like. It’s like a script, a graphic design language for defining and creating the presentation of a structured document written in a markup language.

The template you use in WordPress has several files, one of which is called style.css. It is that file that defines the presentation of the document. To change the color of that menu I was looking in the files just the number of the color code. That number is not in the style file.css and it was necessary to do it differently. Therefore, it was necessary to go to the source code of the page, find the element and define in the additional CSS the features necessary to change the color.

Summary

You want to change the color of the top horizontal menu of the WordPress Twentytwenty template. We use the Web Browser Item inspector to locate that item. We copy the code with the color code that comes in the template. The appearance of the template is accessed and in additional CSS the code is inserted again. Only the color code is changed and it is done.