Change NAV color

[agapeonline]

Please help me change the background color of my NAV bar to bar. I want white letters on black background. I've been trying to figure out Firbug to no avail  http://epinkusfineart.com/

[AnitaC]

Look for this around line 147. Remove the GIF. You could just put background: #000000; in that line all together.

#nav ul, #subnav ul, #header ul.nav, #header ul.menu {
background: url("images/menu_bg.gif") repeat-x scroll 0 0 transparent;
border-left: 0 solid #000000;
border-right: 1px solid #E4E9ED;
float: left;
margin: 0;
padding: 0;
}

---

Need help with customization or troubleshooting? Reach out to me.

[marybaum]

I've never been sure what the big whoop about Firebug is. I greatly prefer the command Inspect Element in either Chrome or Firefox (key command cmd-opt-I or ctrl-alt-I in either browser), which will target the exact element you're looking to change - just select that element with the Controle key if you're old-school like me on the Mac and don't like to right-click, or right-click if you're a young whippersnapper who uses two buttons. (I turn the second button OFF. On the Magic Mouse, once right-click is enabled, I find I can't left-click anymore! So, old-school, one-button-only is how I roll.)

In your case, the nav elements are on line #192 of style.css, and I see that your hover style already has the black background and white type you want.

It may be that you actually want to look at some other rules in that vicinity on your style sheet - I presume you know that when you find the precise element you want to target, you want background: #000; and color: #fff; - but just in case, that's what you paste in.

Hope that helps!

 

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[AnitaC]

I see you got it... now if you want to remove that white line on the Nav on the end look for this code - change the border-right to black (#000000)

#nav ul, #subnav ul, #header ul.nav, #header ul.menu {
border-left: 0 solid #000000;
border-right: 1px solid #E4E9ED;
float: left;
margin: 0;
padding: 0;
}

---

Need help with customization or troubleshooting? Reach out to me.

[agapeonline]

Thank you guys SOOO much. I should have asked and save myself 2 hours 🙁 - but I was so eager to understand Firebug. Thank you so much.

[AnitaC]

You're welcome. I love Firebug. If you would like a short tutorial on it one day/evening - email me on my website and we can set up a virtual meeting.

---

Need help with customization or troubleshooting? Reach out to me.

[agapeonline]

Thank you.  I surely will take you up on it.

[Author]

Posts