no image for link in menu with GK Menu

Hi,

i would like set a image for my links. Image should be show before link. I tried to create a new joomla menu and used option "Image link", without success. I see link over GK Menu only without link image, which should be to see before link.

My screenshot to show option, which i mean:

menu_image.jpg

This screenshot to show link in menu witout image on my website:

menu_image_no.jpg

My test website to check this link "Kids-Club" is reachable under:

http://radio17.audiomeister.de


regards
Nick

You should use menu item suffixes and put images via css, please use search option there was several topics about it.

Hi Nick,

Please consult this:

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'); },

Hi Don Lee,

thanks for you help, but this code do not function. I added you code in override.css, enabled css overrides and created image "home_icon.png" in correct folder, but this do not work. It´s possible this code do not be correct for template "Party freak"?

regards
Dominik

PM me backend and FTP access, Nick, then I will try for you.

Thank you for the PM. Please check the menu, I added the background image for you, also changed class name to "myclass", new code can be seen in override.css

Have a nice day!

Hi Don Lee,

i think, that do not be, what i need for this menu.
I created another web page with JA Framework and i would like create same menu with clickable menu icons by template "Party Freak".

You can find this another menu on http://www.adipositasportal-koepenick.de/

menu_image_no1.jpg

Regards
Nick

I made some changes in the css code, please check and adjust to have the best look for you!

Hi Don Lee,

i´m verry, verry happy. This is a cool solution. You support is verry great. Thanks a lot.


regards
Nick

You are welcome Nick.

Below is the css code I added for Nick, for those who need the same:

Code: Select all

.myclass > a > .menu-title { background-image: url('../images/home_icon.png'); background-repeat: no-repeat; background-position: left top; background-size: 16px 16px; padding-left: 25px; }