Archived

This topic is now archived and is closed to further replies.

  • 0

Custom Nav in WHP

Question

Posted · Report post

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?

Share this post


Link to post
Share on other sites

15 answers to this question

Posted · Report post

correction: `[imageurl]`

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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;}`

Share this post


Link to post
Share on other sites

Posted · Report post

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;

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites