Outreach – Change Primary Nav Bar to Custom Color

[smk1859]

Hi -

Can anyone help me change my navigation bar to a custom color (in Outreach)?  I know that there are 4 available colors, but I'm looking to use a custom color that matches my logo.

Here's my url:  http://www.ereadingvillage.com   Thank you!

Sherry

http://www.ereadingvillage.com

[thepixelista]

Hi Sherry,

It looks like this particular theme uses an image for the background. If you want to keep the subtle texture effect, you'll want to change the "nav.png" image in an image editor like Photoshop, then replace it in your child theme folder.

Alternatively, you can change the background of the navigation bar to a hex color code of your choice. For example, if you change this:

#nav {
background: url("images/nav.png") repeat scroll 0 0 transparent;
}

...to this:

#nav {
background: #4db0d7;
}

...in your child theme CSS, it will change your navigation bar to a blue color.

Hope that helps!

---

My passion is working with women to create beautiful and functional websites that allow their personalities to shine through! Visit my website: http://thepixelista.com/

[smk1859]

That did the trick!  Thanks you so much!!

Is it possible to change colors of the large black border showing around the home page responsive slider?  I'm assuming this is an image as well, because I've racked my brain trying to change it to the "coffee brown" I'm using for my blog title.

Same goes for the black bar at the footer (where the copyright info is located).

I really appreciate your help!

Sherry

[thepixelista]

You're welcome - glad I could help! 🙂

Those sections use images too, but if you look for these portions of in your CSS and change the hex to the one of your choice, it should to the trick:

#inner {
background: #4db0d7;
clear: both;
margin: 0 auto;
overflow: hidden;
padding: 30px 0;
}

("inner" controls the background color behind the slider)

#footer {
background: #4db0d7;
clear: both;
color: #666666;
font-size: 14px;
margin: 0 auto;
overflow: hidden;
width: 100%;
}

("footer" changes the footer background color)

---

My passion is working with women to create beautiful and functional websites that allow their personalities to shine through! Visit my website: http://thepixelista.com/

[Author]

Posts