[SOLVED] Menu Image

I am trying to show image on Main Menu items.

I've followed the instruction I found on other topic, which is the following:

-----
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've tried those steps but unable to show image on the menu.

Please help.

Hi
Can you give us url to your site?

it's http://evediva.com/

I have no problem showing image on top menu as you can see.
Thank you,

Does anyone know how to show image on the main menu? Please help.
Thank you.

Hello Konrad,

Do you know what the issue is?

I can see you have done everything correct however image name used in part of the code "home_icon.png" was just an example.

Make sure you have uploaded or created an image and you have uploaded to your website. Currently everything is working as it should , you are only missing the image itself which code cannot find therefore you don't see anything.

Try following code in your override.css you can see it is working fine which creates a white background color.

Code: Select all

#gkMainMenu > div > ul > li.home { background: #fff; }


See you around...

Thanks for your reply. I 've uploaded the image and I have put correct path on the override.css. Still images won't appear. I can change the background color successfully but not image background! I can give you the FTP information.

Although my solution was to replace or add image but i can see you are trying to add an icon next to title. Anyway follow below and you should be ok.

Your image location is : http://evediva.com/images/home_icon.png
So code in override.css should be as below

Code: Select all

/* Home menu icon starts here */
/* Moving title to right side */
div.gk-menu > ul.level0 > li.home1 > a > span.menu-title {
    float: right;
}
/* Changing width to place icon and positioning to left side */
#gkMainMenu > div > ul > li.home1 {
   background: url('/images/home_icon.png') no-repeat;
   background-position: 10px 15px;
   width: 80px;
}
/* Home menu icon ends here */


If you are going to use icons on other menu items just dublicate above and replace following.
.home1 with whatever you add in other menu items class suffix
width: xx to accommodate extra space for your icon
/images/home_icon.png with your icon.
background-position: 10px 15px -> first number moves left right , second number moves up or down. You can use minus numbers as well.

See you around...

SOlVED!! Thank you so much!

No problem at all, marking this topic as solved.

See you around...

No problem at all, marking this topic as solved.

See you around...

Hello

I have some similar questions with Menu images. First of all I thought that gavern framework offers Link Type Options for doing such "image" things. Tested that and didn't work. (ddoc https://www.gavick.com/documentation/jo ... -3-0-menu/)

This solution with override.css worked for me but I'd like to have only icons into Menu without text title. The problem comes when I disable title into Menu Params, I have no option to put the link on the icon.

Any help very appreciated.