Menu Image

Hi

I would like to add a small image to each of the main menu items, at the moment the image is positioned to the left of the menu name, I would like it positioned above the menu name and centered to the menu name...is this possible and what code should I use for this please?

Many thanks

Could You post an url to your site?

Could You post an url to your site?

Hi

I sent you the website details yesterday on a private message (the website is password protected at the moment)...just wondered if you have had time to take a look and perhaps advise of how I can adjust the menu image item position please?

Many thanks

Could You please send that PM again - I haven't received it .

Could You please send that PM again - I haven't received it .

OK just sent it again, thanks

I would suggest doing it this way, instead of putting images inline:
Please edit: /templates/gk_storebox/css/override.css and add at its end:

Code: Select all

.gkMenu > ul > li > a {padding: 20px 16px 0;}
.gkMenu #menu788 {background: transparent url(../../../images/locked.png) 50% 0 no-repeat;}
.gkMenu #menu792 {background: transparent url(../../../images/location.png) 50% 0 no-repeat;}


Ps - You might need to replace '../../../' with '../../../../' or '../../'.

Doing it in css allows You to center image vertically, and as each menu item has its own unique ID, You can adress any of them in CSS.
Play also with top padding (first number in first line) to "move" image higher or lower.

Also - remember to enable "CSS override" in template settings - advanced section if it is not done already

I would suggest doing it this way, instead of putting images inline:
Please edit: /templates/gk_storebox/css/override.css and add at its end:

Code: Select all

.gkMenu > ul > li > a {padding: 20px 16px 0;}
.gkMenu #menu788 {background: transparent url(../../../images/locked.png) 50% 0 no-repeat;}
.gkMenu #menu792 {background: transparent url(../../../images/location.png) 50% 0 no-repeat;}


Ps - You might need to replace '../../../' with '../../../../' or '../../'.

Doing it in css allows You to center image vertically, and as each menu item has its own unique ID, You can adress any of them in CSS.
Play also with top padding (first number in first line) to "move" image higher or lower.

Also - remember to enable "CSS override" in template settings - advanced section if it is not done already

Many thanks for this, will give it a go now