Custom Nav in WHP

[dscouron 0]

I'm trying to change the look of the nav in the header. I'm running it with dropdown enabled and would like to use a 960px x 35px image as the background, but I'm running into problems. All i'm doing is adding a line in the custom code: # nav {background: url("image location") no-repeat;} When I add this, it appears to white out the entire nav bar. You still get the menu and dropdown but only on mouseover. If you aren't hovering on it, it is just all white. I've verified the image location. Any ideas?

[Andrew 207]

set a background color with this command. Did it find the image ok? e.g. `#nav {background: #HEXCOLOR url(images/yourimage.jpg) no-repeat 0 0;}`

[dscouron 0]

Forgot to mention that I had tried it that way and you don't get the issues where you only see the menu on mouseover. Doesn't use the image though, for instance. #nav {background: #ddd url(images/yourimage.jpg) no-repeat 0 0;} will just make the background of the nav bar flat blue. The original line in styles.css shows the background fine, the only differences being that it's a .png file and it's repeating. eg. background: #072A5A url(images/nav-blue.png) repeat-x 0 0;

[Andrew 207]

ok... to help you I need to know more about the 'desired' result; and what you're getting now. Mockups help

[dscouron 0]

no change from the original styles.css gets me: background: #072A5A url(images/nav-blue.png) repeat-x 0 0; gets me: My goal is to be able to change the nav background so I can control the gradients, something like:

[dscouron 0]

that would be: original using background: #072A5A url(images/nav-blue.png) repeat-x 0 0; here what i want

[Andrew 207]

The urls aren't working. Did you try Imgur?

[dscouron 0]

Original: background: #072A5A url(images/nav-blue.png) repeat-x 0 0;: Desired Result:

[Andrew 207]

ok thanks... I'm still confused; as to the problem. So when you set the image it isn't showing up? Where is the green coming from? The nav in WHP uses a sprite (multiple images in one) and when a user hovers or clicks this images is moved around.

[dscouron 0]

Ah, I thought the nav was a single image, being repeated. The green is coming from the hex number when i use: background: #8ec25c url(images/"imageurl") repeat-x 0 0; The #072A5A was a typo, but that would just show a solid blue bar instead of green. I'm pretty sure i could accomplish adding an image at the beginning (left) of nav by adding a line into header.php, but that doesn't really solve the problem of not being able to control the look of the entire nav background.

[dscouron 0]

I tried achieving the same thing by putting: `` into the header.php, which will work to put an image in the nav before the menu starts, but it is treated as another menu item. It has the same padding and on mouseover, turns white since dropdown is enabled. It would be a compromise anyways, though, because this way still wouldn't allow for control over the background image of the nav bar as a whole.

[dscouron 0]

correction: ``

[dscouron 0]

``

[Andrew 207]

there should be the need to compromise to make this work... and I would recommend just using CSS to do it. (no HTML edits) My issue is I still don't quite understand what we're trying to accomplish. If we're trying to change the background for the #nav bar... a rule like this: `#nav{background: #HEX url(images/yourimage.jpg) no-repeat 0 0;}` should work... Have you figured out how to get your custom image to show up for the nav?

[dscouron 0]

I got it. I'm setting everything up locally and found that you can't use url(images/yourimage.jpg). Instead you have to use url(http://..full url.../images/yourimage.jpg). Shows the custom image perfectly. Thanks for all the help.

[Andrew 207]

yes, you have to do that if the image you want isn't inside the theme images folder