Primary Nav Background Image

[david_hartman 0]

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

[bryan-hadaway 3]

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

[david_hartman 0]

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

[cmunns 16]

You probably just need to mess with the z-index of the elements around the icons and nav.

[david_hartman 0]

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

[bryan-hadaway 3]

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

[david_hartman 0]

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

[bryan-hadaway 3]

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

[david_hartman 0]

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

[cmunns 16]

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?

[david_hartman 0]

hmm.. i don't think so? the only changes made are reflected in this post. all placed in 'custom css' box.. thanks, david

[kastelic 6]

Give this a try: body .icons{z-index: 100}

[david_hartman 0]

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