How to change nav menu bar color in catch box theme

#1 – change the background element:

#branding #access,
#colophon #access-footer,
#branding ul.menu ul a {
background: linear-gradient(#255A8C, #1B4266) repeat scroll 0 0 transparent;
}

#2 – change the background-color element:

#main {
    background-color: #EEEEEE;
    clear: both;
    padding: 2em 0 0;
}

Thanks for your quick and accurate response, worked great on both issues.

I also wanted to change the hover color of the menu so I grabbed this piece of code and modified it to fit the colors I wanted:

#branding ul.menu li:hover > a,
#branding ul.menu a:focus,
#colophon #access-footer ul.menu a:hover,
#colophon #access-footer ul.menu a:focus {
background: linear-gradient(#7b1f0a, #501407) repeat scroll 0 0 transparent;
}

It worked but is that the correct way to do it or is there potential problems with browser types or anything else I am not aware of?

Again thanks for the help.

Damn those other browsers, here is the full version to play with, you just need to alter the backgrounds to take into consideration the other and older browsers:
#1

#branding #access,
#colophon #access-footer {
	background: #3d3d3d; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#585858, #3d3d3d);
	background: -o-linear-gradient(#585858, #3d3d3d);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#585858), to(#3d3d3d)); /* older webkit syntax */
	background: -webkit-linear-gradient(#585858, #3d3d3d);
	clear: both;
	display: block;
	float: left;
	margin: 0 auto 2px;
	width: 100%;
}

For the hover elements you had, full version:

#branding ul.menu li:hover > a,
#branding ul.menu a:focus,
#colophon #access-footer ul.menu a:hover,
#colophon #access-footer ul.menu a:focus {
	background: #e5e5e5; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e5e5e5'); /* for IE */
	color: #373737;
}

@ Brad Davis,

I am working on changing the nav bar color as well. When I test in firebug it works fine however when I go to the css stylesheet and search for the code, it does not show up when I do a find search. Any ideas what I may be doing wrong?

my site is https://formulaforpeace.com

You don’t edit the theme’s files. You use either a Child Theme or Custom CSS plugin. Do you have either?

Thanks,

No, how do I get the plugin?

Install this one https://www.ads-software.com/extend/plugins/custom-css-manager-plugin/

If you have any more queries you ought to create your own thread to discuss them.