Image for Menu

AppSite - Professional Business Template for Joomla support forum.
GK User
Sun Feb 24, 2013 7:01 pm
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!
User avatar
Fresh Boarder

GK User
Sun Feb 24, 2013 7:36 pm
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.
User avatar
Platinum Boarder

GK User
Sat May 25, 2013 12:03 pm
Pawel F wrote: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
User avatar
Fresh Boarder

GK User
Thu May 30, 2013 12:06 am
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.
User avatar
Platinum Boarder

GK User
Thu May 30, 2013 10:44 am
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/
User avatar
Platinum Boarder

GK User
Thu May 30, 2013 10:47 am
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 :P
User avatar
Platinum Boarder

GK User
Thu May 30, 2013 11:06 am
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
User avatar
Platinum Boarder


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.