Images required on menu

Elegant Joomla template designed especially for both professional and personal website presentation.
GK User
Fri Oct 21, 2011 3:48 pm
Hiya,

I've been wracking my brains for ages with this one. Is there a way to add images (icon sized for example) next to the menu items on the Postnote template (joomla 1.7). I just cannot figure it out. I add the image using the 'Link Image' under Link Type options but they simply will not appear within the menu. Does anyone have any ideas? I've tried really hard to figure this out myself but I've hit a brick wall. I bet it's something really small that I'm missing, yet I've tried everything!

Any help much appreciated!

Regards,
Darren
User avatar
Fresh Boarder

GK User
Mon Nov 21, 2011 2:18 pm
I would like to do the same, but haven't found a solution yet. Hope somebody here can help us out...
Thanks in advance!
User avatar
Senior Boarder

GK User
Mon Nov 21, 2011 2:53 pm
I've been looking at the source code of the browser, the templates images (Musicity in my case)
The menu items are separated by vertical lines, I changed this in the template images folder into the image I wanted,
then changed menu.css, because the image needed to move a bit to the right.
Here's the code:

/* Extra menu */
#gkMainNav { min-height:42px; line-height:42px; background: transparent url('../images/horizontal_line.png') repeat-x 0 0; }
#gkMenu { min-height:42px; line-height:42px; background: transparent url('../images/horizontal_line.png') repeat-x 0 41px; }
div.gk-menu ul > li,
div#gkDropMain ul > li { background: url('../images/vertical_line.png') repeat-y right center; min-height:28px; line-height: 28px; margin:7px 10px; text-transform: uppercase; }
div.gk-menu ul > li a,
div#gkDropMain ul > li a { color:#9f9f9f; display:block; min-height:28px; line-height:28px; padding:0 20px; font-size:17px; margin:0 10px;}
div.gk-menu > ul > li.active > a,
div#gkDropMain > ul > li.active > a { color: #fff; }
In Red is what I added to move the images to the right. If you have no vertical lines between Menu items, you might have to add the line gkDropMain containing /vertical_line.png and make an image or icon called vertical_line.png (vertical_line can be changed in whatever you want, as long as it is the same in menu.css and in the image folder)
Of course this only works when you need the same image for every menu item...
Hope this helps!
User avatar
Senior Boarder

GK User
Tue Nov 22, 2011 1:55 pm
If you are trying to add image as background to a menu item see my post in below link

Code: Select all
https://www.gavick.com/forum/134-joomla-17/95490-menu-image.html
User avatar
Platinum Boarder


cron