Jump to content
Sign in to follow this  
david_hartman

Primary Nav Background Image

Recommended Posts

david_hartman

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
david_hartman

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

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

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

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites
david_hartman

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×