david_hartman 0 Report post Posted January 25, 2011 Hi, I would like to have a custom image behind the text of the primary navigation on my site. I tried the code below and you can see the results at this link. What is happening? http://wpdev.sontagfilm.org/ Also on a side note, how do make that nav text not ALL CAPS? Its not set that way in the settings? Thanks! David #primary-nav li a { border-color:transparent transparent -moz-use-text-color; border-style:solid solid none; border-width:1px 1px medium; color:#777777; display:block; font-size:1.05em; font-weight:normal; letter-spacing:0.05em; line-height:1.2em; padding:12px 10px; text-decoration:none; background-image:url(http://wpdev.sontagfilm.org/wp-content/uploads/2011/01/Branding_Nav.jpg); } Share this post Link to post Share on other sites
bryan-hadaway 3 Report post Posted January 25, 2011 Try: #primary-nav{ background:url(http://wpdev.sontagfilm.org/wp-content/uploads/2011/01/Branding_Nav.jpg'>http://wpdev.sontagfilm.org/wp-content/uploads/2011/01/Branding_Nav.jpg) no-repeat} or: #nav_row{ background:url(http://wpdev.sontagfilm.org/wp-content/uploads/2011/01/Branding_Nav.jpg'>http://wpdev.sontagfilm.org/wp-content/uploads/2011/01/Branding_Nav.jpg) no-repeat} Thanks, Bryan Share this post Link to post Share on other sites
david_hartman 0 Report post Posted January 25, 2011 Thanks Bryan! I was able to get pretty close using the second code- however, the social icons have disappeared (I would like to keep them there for now) http://wpdev.sontagfilm.org/ #nav_row{ background:url(http://wpdev.sontagfilm.org/wp-content/uploads/2011/01/Branding_Nav1.jpg) no-repeat; position:relative; margin:0px auto 0px -30px; } The first bit worked ok as well but the image was mis-aligned all the way to far left of the screen and I couldn't get it in place with margins, padding, size, etc.. Very close? Thanks so much.. Best, David Share this post Link to post Share on other sites
cmunns 16 Report post Posted January 25, 2011 You probably just need to mess with the z-index of the elements around the icons and nav. Share this post Link to post Share on other sites
david_hartman 0 Report post Posted January 26, 2011 Ok.. the social icons are (i believe) behind the header..? Moved "distance from" setting to -100 and they reappeared a bit.. I'm not sure what you mean by z-index.. have fussed with nav and social icon position, but can't get them back in front..? Thanks, David Share this post Link to post Share on other sites
bryan-hadaway 3 Report post Posted January 27, 2011 See if this get's you closer: ` #nav_row { background: url("http://wpdev.sontagfilm.org/wp-content/uploads/2011/01/Branding_Nav.jpg") no-repeat scroll 0 0 transparent; } body #primary-nav .content-pad { padding-left: 1px; padding-top: 0; } ` Also I want you to start checking your markup here: http://validator.w3.org/ And especially your CSS here: http://jigsaw.w3.org/css-validator/ Thanks, Bryan Share this post Link to post Share on other sites
david_hartman 0 Report post Posted January 27, 2011 Thanks Bryan, Tried this code, but the social icons are still hidden behind the image... Thanks for the tip on those sites.. I'm looking at it now. Best, David Share this post Link to post Share on other sites
bryan-hadaway 3 Report post Posted January 28, 2011 Okay, why don't you see if this looks good and if not you can try moving it around: ` body .icons{ top:75px; right:29px} ` Thanks, Bryan Share this post Link to post Share on other sites
david_hartman 0 Report post Posted January 28, 2011 Thanks Bryan, It still will not let me place them on the Nav Bar in front of the image. While I can move them anywhere else on the page- they still hide behind that image.. http://wpdev.sontagfilm.org/ Is there something in the Nav Bar that should be changed..? It is set as a 'background' image tho.. Thanks so much, David Share this post Link to post Share on other sites
cmunns 16 Report post Posted January 28, 2011 Try this then: You must have changed the z-index somewhere. You could try placing them with a hook so they HTML wise come in the same div as the menu? Share this post Link to post Share on other sites
david_hartman 0 Report post Posted January 28, 2011 hmm.. i don't think so? the only changes made are reflected in this post. all placed in 'custom css' box.. thanks, david Share this post Link to post Share on other sites
kastelic 6 Report post Posted January 28, 2011 Give this a try: body .icons{z-index: 100} Share this post Link to post Share on other sites
david_hartman 0 Report post Posted January 28, 2011 Thanks Jimmy. Perfect.. that did it! http://wpdev.sontagfilm.org/ Thank you Bryan and Cmunns for all of your help with this. It is very much appreciated. Best, David Share this post Link to post Share on other sites