Primary-Nav - how to position text and background image in h:over state

[christian_w 0]

Hello everyone, I included background-images in my main-navigation. The images change on h:over. Now I am trying desperately to position the text underneath the images. I'd be very happy for any advise because I am running out of ideas how to accomplish my goal. Please have a look at http://www.fernwisser.de - you'll see three icons and three text-links. I am happy with the h:over effect on the images but I want the text links to appear underneath the images. Thanks in advance Christian

[catrina 103]

Since the text and image are inside the same container, the CSS used for re-positioning will alter the position of the background image and text simultaneously. There will be some custom code required in the primary navigation to separate the text from the background image. Do you have PlatformBase enabled?

[christian_w 0]

Hello Catrina, yes, I have the PlatformBase theme enabled. The CSS I am using already reads like this: #primary-nav .main-nav li a:hover{ background: #fff; } #primary-nav li.menu-item-5811 a{ background: url("images/fernwissen.png") no-repeat scroll left center transparent; height: 91px; width: 198px; } #primary-nav li.menu-item-5811 a:hover{ background: url("images/fernwissen_hover.png") no-repeat scroll left center transparent; height: 91px; width: 198px;}

[catrina 103]

I'm having a difficult time figuring out the CSS for this (the only solution I can come up with is resizing the images so that they show up as icons that display to the left of the text links). I will leave this open, but please bump this up so that another moderator will see this (and don't mark this as "Accepted").

[christian_w 0]

Thank you Catrina, I am not really happy with the solution you suggested. But thanks for trying anyway. Maybe someone else has any suggestions?

[christian_w 0]

I am still struggling with this problem. I now tried to hide the text link instead. But once I delete the menu description (in the wordpress menu dialog) the menu element disappears. I would really appreciate some advice on my problem. Thank you.

[Kate 3]

Hey Christian, My suggestion: instead of setting the background for the nav items, set it on the list item instead. At that time, also set "position:relative" to the list items (if it's not already). Then, you can use "position:absolute" on the links. (Their position will be absolute in relation to their parent element (the list item).) Hopefully that makes sense. I think that will get you there without any issues

[christian_w 0]

Hey Kate, thank you for your advice. If I get you right you're suggestion something like this: li.menu-item-5951{ background: url("images/fernwissen.png") no-repeat scroll left center transparent; height: 91px; width: 198px; position:relative} #primary-nav li.menu-item-5951 a{ position:absolute;margin-top: 85px;} (I applied this code on the first element. Maybe you can take a look again at www.fernwisser.de) This works just fine for positioning the text link but now I cannot apply a H.over effect on the background image. Or am I missing something here? Plus I find it more user-friendly to allow visitor to click on the larger image than on the small text-links. I wasn't aware that this might end up to be such a big problem. Maybe you know how to get rid of the text-link at all. Thank you Christian

[kastelic 6]

Here's the code for the tv one:

	#primary-nav li.menu-item-5821 a {
	background: url("images/fernsehen.png") no-repeat scroll left top transparent;
	height: 91px;
	width: 170px;
	line-height: 191px;
	text-align: left;
	height: 104px;
	text-indent: 47px;
	}
	

You still have to fix the background position for the hover state. Don't add anything else (height, etc.) to the hover state CSS or it will mess up unneccesarily.)

[christian_w 0]

That's it! Thank you, kastelic.