Okay
  Print

Changing Primary Navigation color

You can modify the Primary Navigation color by modifying this code in style.css. If you used the predefined style, you'll need to modify the code in one of style-*.css file.

.contain-to-grid { width: 100%; background: #d8e04c; }
.top-bar { overflow: hidden; height: 45px; line-height: 45px; position: relative; background: #d8e04c; margin-bottom: 0; }
.top-bar .name h1 a { font-weight: bold; color: rgba(0, 0, 0, 0.6); width: 50%; display: block; padding: 0 15px; }
.top-bar .toggle-topbar a { color: rgba(0, 0, 0, 0.6); text-transform: uppercase; font-size: 0.8125em; font-weight: bold; position: relative; display: block; padding: 0 15px; height: 45px; line-height: 45px; }
.top-bar .toggle-topbar.menu-icon a { text-indent: -48px; width: 34px; height: 34px; line-height: 33px; padding: 0; color: rgba(0, 0, 0, 0.6); }
.top-bar .toggle-topbar.menu-icon a span { position: absolute; right: 0; display: block; width: 16px; height: 0; -webkit-box-shadow: 0 10px 0 1px rgba(0, 0, 0, 0.6), 0 16px 0 1px rgba(0, 0, 0, 0.6), 0 22px 0 1px rgba(0, 0, 0, 0.6); box-shadow: 0 10px 0 1px rgba(0, 0, 0, 0.6), 0 16px 0 1px rgba(0, 0, 0, 0.6), 0 22px 0 1px rgba(0, 0, 0, 0.6); }
.top-bar.expanded .title-area { background: #d8e04c; }
.top-bar.expanded .toggle-topbar a { color: black; }
.top-bar.expanded .toggle-topbar a span { -webkit-box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black; box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black; }
.top-bar-section ul { width: 100%; height: auto; display: block; background: #cad344; font-size: 16; margin: 0; }
.top-bar-section .divider, .top-bar-section [role="separator"] { border-bottom: solid 1px #dde462; border-top: solid 1px #d3dc36; clear: both; height: 1px; width: 100%; }
.top-bar-section ul li > a { display: block; width: 100%; color: rgba(0, 0, 0, 0.6); padding: 12px 0 12px 0; padding-left: 15px; font-size: 0.875em; font-weight: bold; background: #cad344; }
.top-bar-section ul li.hover > a { background: #d2db32; color: black; }
.top-bar-section ul li.active > a { background: #d2db32; color: black; }
.top-bar-section .has-dropdown > a:after { content: ""; display: block; width: 0; height: 0; border: inset 5px; border-color: transparent transparent transparent rgba(68, 68, 68, 0.5); border-left-style: solid; margin-right: 15px; margin-top: -4.5px; position: absolute; top: 50%; right: 0; }
.top-bar-section .dropdown li.title h5 a { color: rgba(0, 0, 0, 0.6); line-height: 22.5px; display: block; }
@media only screen and (min-width: 50.0625em) { .top-bar { background: #d8e04c; *zoom: 1; overflow: visible; }
  .top-bar.expanded { background: #d8e04c; }
  .top-bar-section li a:not(.button) { padding: 0 15px; line-height: 45px; background: #d8e04c; }
  .top-bar-section li a:not(.button).hover { background: #616618; }
  .top-bar-section .has-dropdown > a:after { content: ""; display: block; width: 0; height: 0; border: inset 5px; border-color: rgba(68, 68, 68, 0.5) transparent transparent transparent; border-top-style: solid; margin-top: -2.5px; top: 22.5px; }
  .top-bar-section .dropdown li a { color: rgba(0, 0, 0, 0.6); line-height: 1; white-space: nowrap; padding: 7px 15px; background: #dde462; }
  .top-bar-section .dropdown li label { white-space: nowrap; background: #dde462; }
  .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] { border-bottom: none; border-top: none; border-right: solid 1px #dde462; border-left: solid 1px #d3dc36; clear: none; height: 45px; width: 0px; }
  .top-bar-section .has-form { background: #d8e04c; padding: 0 15px; height: 45px; }
  .no-js .top-bar-section ul li:hover > a { background: #d2db32; color: black; }
  .no-js .top-bar-section ul li:active > a { background: #d2db32; color: black; }
}
@media only screen and (min-width: 768px) {
  .contain-to-grid.fixed { background: #d8e04c; }
}

There is no line number on above code because the line number may be different on each version.