The one thing you should not do is edit any of the theme files directly. If the theme gets updated because of feature enhancements, bug fixes, or security patches, or if the theme has to be updated because of a change to the WordPress core, then your changes will be lost. The recommended procedure is to either create a child theme or use a CSS plugin like Jetpack or Custom CSS Manager. In your case, a CSS plugin is probably easier, and with a plugin, your custom CSS will be safe from any theme or WordPress updates. If your theme comes with a custom CSS option, that would be even better but most themes do not come with such an option.
In either your child theme’s style.css file, or in your custom CSS plugin, you would then add a rule which overrides the existing rule. The way that CSS works is if there are multiple rules with the same selector, or if the selectors have the same specificity, then the rule which comes last will take precedence.
So let’s say you want to change the color of the responsive menu. You see this rule using your web debugger:
@media only screen and (max-width: 959px) {
#navigation {
height:70px;
width:100%;
position:inherit;
top:auto;
left:auto;
right:auto;
margin-top:0;
background:#279383 url("../images/responsive-nav.png") right center no-repeat;
}
}
The rule is in a media query so that it’s only active when the screen width is below 960px. What you would do is create a rule in your custom CSS with the same selector, and include only the properties that you want to change or add:
@media only screen and (max-width: 959px) {
#navigation {
background-color:#0000ff;
}
}
This should change the color of the navigation bar to a blue color. You can see what hex codes to use for other colors using this color picker.
