How to change the menu colour in WordPress. This can become such a hectic task. Have look on steps. And resolve your problem.
Searching for a perfect website theme. Spending hours on your research. And then worst feeling ever. Your Menu doesn’t look good with the theme you have decided. How frustrating and irritating this part is. Customization is WordPress best feature. There is nothing which is not possible on WordPress. WordPress is one of the top content management tools. So in case, your hard work of searching perfect theme is in vain. Or everything on your site is perfect and aesthetic from layouts to fonts. But your Menu colour is giving you OCD. Then you need to worry less. And focus on this article more. In this article, we will discuss the steps of How to change the menu colour in WordPress?
Before we get into the procedure. Let us become familiar with Additional CSS. Additional CSS is that magic tool we are going to learn working on in this post. So what is Additional CSS?
Additional CSS
This feature was released by WordPress in 4.7 version. The purpose of this release was to provide their users with better and enhanced customization. Using Additional CSS. This release arrived on December 6, 2020. Along with default theme Twenty Seventeen. In Additional CSS you usually have to edit some codes. These codes help you modify themes, fonts and etc. Additional CSS feature is found in Appearance Setting.
How to change the menu colour in WordPress
This is a three step process. Mainly revolving around coding. So yes you need to be very careful. And also you need to maintain all the symbols like full stop, comma and etc.
Identify the Element you Need to Change
Every theme is different from one another. In terms of coding and design. So your very first task is to identify the element you need to change. Most likely you are not supposed to change sidebar colour. But the colour of the constituent elements like widgets. Now coming to the point. What you want to change on your site appearance. To make some changes. Before you need to open your browser. Open your site. Now right-click on the area you want to change. Click on “Inspect Element”.
As soon as you perform the same. Page of coding will appear on your screen. Remember elements of the page are on left and setting for those elements are on right. Focus on the details on the right for elements and search for words like “background” or “background colour”. To confirm if this is the element you are looking for not. Just mark (tick on a checkbox on left) them and see whether the colour of your background changes or fades or not.
Choose the Colour
As soon as you find the colour you want to change. Add the colour which is most suitable according to you. To add the new colour you need to uncheck the current colour option. Now click near the closing bracket “}”. You can enter your own CSS rule. Now enter “background-colour”, press tab, and type in the colour you want for example black. Then you will get a drop-down box and the result will change in real-time. The changes you will notice on your browser are temporary. You need to extract new rule in order to have a permanent changes.
Extracting the New Rule
Now Right-click on the settings you want to copy. You will get an option “Copy Rule” click on it. Paste those codes somewhere like Notepad, Word etc. Move to your dashboard. Customization and then click on Additional CSS option. Paste the copied codes there. And delete the previous codes not all but then once you want to change.
Thankyou for visiting us, keep reading.
