Change colour of navigation bar in Arras theme

JenniP,

visit style.css on line 86 locate the following selector:

#header {
   background: none repeat scroll 0 0 #1E1B1A;
   border-bottom:5 px solid #383332;
   padding: 0;
   }

Change the background hex code “#1E1B1A” to a different color.

I’m just wondering, after spending ages looking through all of the theme files in Arras editor, whether following the instructions from doc4 would actually change the header colour as opposed to the navigation bar?

I really want to change the colour of my nav bar but just can’t find where to do it.

And btw, my style.css file didn’t have anywhere near 86 lines.

Can anyone help please?

Install the FileManager plugin for WP. Then navigate to wp-content/themes/arras/css/styles

Pick the stylesheet that your layout is using, for example default.css.

You can fully customise your nav elements here:

/* top menu */
#top-menu  { background: #111; border-bottom: 1px solid #333; }
#top-menu-content  { height: 25px; padding: 3px 0; }
#top-menu-content .sf-menu  { text-transform: uppercase; margin: 0 2px; }
#top-menu .sf-menu a  { display: block; text-decoration: none; padding: 7px 10px 8px; color: #AAA; font-size: 10px; border-right: 1px solid #333; }
#top-menu .sf-menu ul a  { border: none; }
#top-menu .sf-menu ul li  { border: 1px solid #333; margin-top: -1px; }
#top-menu .sf-menu a:hover, #top-menu .sf-menu li:hover, #top-menu .sf-menu li.sfHover, #top-menu .sf-menu ul li  { color: #FFF; background: #111; }
#top-menu .sf-menu ul a:hover, #top-menu .sf-menu ul li.sfHover, #top-menu .sf-menu ul li:hover { color: #373331; background: #FFF; }
#top-menu .sf-menu ul li.sfHover a.sf-with-ul { color: #373331; }
#top-menu .sf-menu li li a  { padding: 7px 10px; line-height: 1; height: auto; font-size: 10px; }
#top-menu .sf-menu .sf-with-ul  { padding-right: 15px; }
#top-menu .sf-sub-indicator  { background: url(../../images/dropdown.png) no-repeat; width: 5px; height: 5px; text-indent: -9999px; display: inline-block; position: relative; left: 7px; top: 0; vertical-align: middle; }
#top-menu .sf-menu ul .sf-sub-indicator	{ display: none; }
#top-menu .sf-menu li:hover ul, #top-menu .sf-menu li.sfHover ul { top: 2.4em; }
#top-menu ul.sf-menu li li:hover ul, #top-menu ul.sf-menu li li.sfHover ul, #top-menu ul.sf-menu li li li:hover ul, #top-menu ul.sf-menu li li li.sfHover ul { top: 0; }

/* main navigation */
#nav  { background: url(../../images/topnav.jpg) repeat-x bottom #322C2C; min-width: 990px; }
#nav-content  { margin: 0 auto; width: 978px; }
#nav .sf-menu  { float: left; line-height: 1.1; max-width: 770px; }
#nav .sf-menu a  { display: block; text-decoration: none; padding: 8px 12px 11px; color: #AAA; font-size: 14px; }
#nav .sf-menu ul li  { border: 1px solid #474331; margin-top: -1px; }
#nav .sf-menu a:hover, #nav .sf-menu li:hover, #nav .sf-menu li.sfHover, #nav .sf-menu ul li  { background: #373331; color: #FFF; }
#nav .sf-menu ul a:hover, #nav .sf-menu ul li.sfHover, #nav .sf-menu ul li:hover { color: #373331; background: #FFF; }
#nav .sf-menu ul li.sfHover a.sf-with-ul { color: #373331; }
#nav .sf-menu li li a  { padding: 7px 10px; line-height: 1; height: auto; font-size: 12px; }
#nav .sf-menu .sf-with-ul  { padding-right: 15px; }
#nav .sf-sub-indicator  { background: url(../../images/dropdown.png) no-repeat; width: 5px; height: 5px; text-indent: -9999px; display: inline-block; position: relative; left: 7px; top: 0; vertical-align: middle; }
#nav .sf-menu ul .sf-sub-indicator	{ display: none; }
#nav .quick-nav li  { padding-top: 8px; }

.quick-nav li			{ padding: 5px 0 0 8px; }
.quick-nav a:link, .quick-nav a:visited	{ display: block; text-indent: -9000px; width: 16px; height: 16px; float: left; clear: left; opacity: 0.6; }
.quick-nav a:hover  { opacity: 1; }

.quick-nav #rss			{ background: url(../../images/rss.png) no-repeat; }
.quick-nav #twitter		{ background: url(../../images/twitter.png) no-repeat; }
.quick-nav #facebook	{ background: url(../../images/facebook.png) no-repeat; }