Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

How to put images between menu items


 
Prev Previous Post   Next Post Next
  #1  
Old Nov 6, 2013, 03:14 PM
gr870sfunk's Avatar
gr870sfunk
 
110 posts · Mar 2011
Montgomery, AL
Information How to put images between menu items

I scoured the forums for an answer I could live with, but I didn't find one.

After over an hour of trial and error, I have figured it out and thought I would share my newly acquired abilities. Lord knows if i've got/had this problem someone else has too.

The trick is to make it your background image on the links within the menu. Getting the positioning can be a little tedious, but that's just the way she goes.

This is the CSS for my menu:
HTML Code:
div#menu1 {
height: 36px; 
margin-bottom:0px; 
border:none; 
background: transparent; 
padding:0 0 0 110px !important;
}

div#menu1 ul.rMenu {
background: transparent;
border: none 0px; 
padding-right:0px;
}

div#menu1 ul.rMenu li {
padding-left:0px;
}

ul.rMenu li a:link, 
ul.rMenu li a:visited,  
ul.rMenu li a:active, 
ul.rMenu li { 
background-color: transparent !important;
}


div#menu1 ul.rMenu li a,
ul.rMenu li a:hover{
border:none !important;
list-style-type: none;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
padding:1em 2.5em 1em 1em;
background: url(http://www.montgomerytrees.org/wp-content/uploads/2013/11/menu-slash.jpg) no-repeat right center;
}

#menu-item-37 a{
background-image:none !important;
background:transparent;
padding-right:0;
width:15px;
}
I'd post a link to it working, but the site isn't live yet. So here's a little screencap.


You have to make sure that both the active AND hover link states are included in the CSS with the background image otherwise said image will disappear on hover.

I hope this helps someone!
 

Bookmarks

Tags
background, image, item, menu

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to use images for page menu items? pierrebk4 Page & Category Menu Bars 44 Nov 23, 2011 12:43 PM
[SOLVED] menu two menu items links to same page / external link inside dropdown menu thekjub9 Page & Category Menu Bars 1 May 24, 2011 06:59 PM
Adding Social Images to Page Menu (As Menu Items) justle Page & Category Menu Bars 2 Jan 27, 2011 12:00 AM
How to use background images for menu items instead of text daxryan Page & Category Menu Bars 2 Feb 27, 2009 04:29 PM


All times are GMT -6. The time now is 03:29 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.