Image for Menu

Hi,

I've been trying to add an image as a menu using the following code but it's not working:

Go to Joomla Admin > Menus > Main Menu
Select your Home Menu item
On the right under " Menu Params (Gavick Pro) and in "Additional class" enter "home" without quote marks.

This will allow you to use css style class "home" from now on for menu item Home only.

Enable CSS override option from template settings by going to
Joomla Admin > Extensions > Template Manager > gk_boutique- Default
On the right Advanced Features > CSS Override.

Now find file: /templates/gk_boutique/css/override.css

I 've added the following code:
#gkMainMenu > div > ul > li.home { background-image: url('../images/home_icon.png'); },

I changed the image link to the one I want but it doesn't seem to work. Any advise?

Cheers!

Hi, try this:
Menu Manager: Edit Menu Item "home" -> Link Type Options (TAB) -> Link Image [choose icon] + SAVE

Using this method you';; be able to add icon for every menu item, one by one.

Hi, try this:
Menu Manager: Edit Menu Item "home" -> Link Type Options (TAB) -> Link Image [choose icon] + SAVE

Using this method you';; be able to add icon for every menu item, one by one.

Do not work

2) What about using Awesome font or other dingbats font for menu items? For most people this solutions works well.
3) or do add images for <li> that create menu. Also easy method, just read about CSS list-style-image property.

I've added symbol "Checkmark" in menu items using CSS content property, see example below

symbol-in-menu.png

My css code was very simple:

Code: Select all

div.gk-menu > ul.level0 > li > a > span.menu-title:before {
   content: "\2713";
   color: orange;
}


Read more about it here: http://css-tricks.com/css-content/

Checkmark only for first item, also easy:

Code: Select all

div.gk-menu > ul.level0 > li > a#menu101 > span.menu-title:before {
   content: "\2713";
   color: orange;
}

I've added ID from first item "#menu101".
But you can use also images

Code: Select all

div.gk-menu > ul.level0 > li > a#menu101 > span.menu-title:before {
   content: url(../images/home.png);
}

But remember to add image and right URL before

Here my another example

printer-in-menu.png

Here you can see there is only one icon for "home" menu item. I used default printer icon,

Code: Select all

div.gk-menu > ul.level0 > li > a#menu101 > span.menu-title:before {
   content: url(../images/printButton.png);
}

div.gk-menu > ul.level0 > li > a#menu101 > span.menu-title{
display: none;
}

div.gk-menu > ul.level0 > li > a#menu101:before {
   content: url(../images/printButton.png);
}

..but you should add better icon with space in top, so icon should have ~32 px in height. So you'll get nice effect /below/.

printer-in-menu2.png