Jump to content
Sign in to follow this  
christian_w

Images in main navigation

Recommended Posts

christian_w

I'd like to place images next to the text links in my main navigation. I want the images only to show for the links in the main hierarchy (Home, Kriminalit?¤tstheorien, Personen) but I intend to include a nice hover effect (replace the images on mouse over). I managed to embed the background images. However, right now the images appear also in my drop-down menu.

#primary-nav .menu-item-26 a{
	    	background: url("images/theory.png") no-repeat scroll left center transparent;
	    	margin-right: 5px; }
So I tried this instead, which solves the problem above but works only when the page is not in "current state".
#primary-nav li.menu-item-180 {
	    	background: url("images/home.png") no-repeat scroll left center transparent;
	    	margin-right: 5px; }

You'll find my page under http://krimtheo.criminologia.de. Any suggestions would be highly appreciated.

Share this post


Link to post
Share on other sites
catrina

Try this instead:

#primary-nav a.sf-with-ul {
	background: url("images/home.png") no-repeat scroll left center transparent; margin-right: 5px; }


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
christian_w

Thank you Katrina, that's it. Just for further references I post the code I finally came up with: Show images in navbar for menu-items with submenu-items

#primary-nav .menu-item-xx a.sf-with-ul {
	    	background: url("images/image1.png") no-repeat scroll left center transparent; margin-right: 10px; padding-left: 25px;}
replace image on a:hover
#primary-nav .menu-item-xx a:hover.sf-with-ul {
	    	background: url("images/image1_hover.png") no-repeat scroll left center transparent; margin-right: 10px; padding-left: 25px;}
Show images in navbar for menu-items without submenu-items
#primary-nav li.menu-item-yy a{
	background: url("images/image2.png") no-repeat scroll left center transparent; padding-left: 25px;}
replace image on a:hover
#primary-nav li.menu-item-yy a:hover{
	background: url("images/image2_hover.png") no-repeat scroll left center transparent; padding-left: 25px;}

Share this post


Link to post
Share on other sites
Kate

Thanks for posting back, Christian. I'll mark this as resolved.

Share this post


Link to post
Share on other sites
josh1178

This info is great and I was successful, but can someone please tell me how I would go about remove the text from the menu entirely so I can just have a pic for my home logo? If I delete the text from the wordpress menu, wordpress removes the page from the nav bar automatically. I'd also like to remove the 'hover' effect, so that I just have a home icon that changes color, but the home menu area doesn't change shade. Thanks!

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  

×