Joomla 3.0 Tutorial – How to Add Images to Menus

by Elaine on April 14, 2014

In Joomla 3.0 you can add images to your menus.  I will show you how to add images to your Menu items in the Menu Manager.  I will create a new menu listing called ‘Fruit Top’ and under that menu I will create child menu items – Apples and Pears.  One menu item I will create just as an image and the other will have the image and the title of the menu.  You can see what I mean in the screenshot below:

joomla 3 0 tutorial how to add image to menu sub menus 5 Joomla 3.0 Tutorial   How to Add Images to Menus Joomla 3.0 Tutorial – How to Add Images to Your Menu

Overview of Adding Images to Menu

  1. Edit your Menu Item in Menu Manager 
  2. Select Image ‘Advanced Options’ in Menu Manager
  3. Insert Image with Title – See Example – Apples
  4. Insert Image without Title – See Example – Pears

Steps:

1.  Edit your Menu Item in Menu Manager 

You can add an image to any Joomla 3.0 menu item whether it be the parent or child menu item.  In this example I will be creating the ‘Apples’ child menu item under the ‘Fruit Top’ Parent menu item.  Please create a menu item with your own information.

joomla 3 0 tutorial how to add image to parent child menu items 1 Joomla 3.0 Tutorial   How to Add Images to Menus Joomla 3.0 Adding New Child Menu Item
  • Login to your Joomla 3.0 Administrator Panel
  • Click on ‘Menus’, ‘Top’, ‘Add New Menu Item
  • Enter in the following under the ‘Details’:
    • Status = Published
    • Menu Title = Apples
    • Menu Location = Top
    • Parent Item = – Fruits Top
  • Click on ‘Advanced Options’

2.  Select Image ‘Advanced Options’ in Menu Manager

Here you can upload an image or select an existing image from your Media Manager.  This is linked directly to your Media Manager.  You can easily upload an image using the ‘Choose file’ & ‘Start Upload’ button.  I’ve already uploaded my ‘Apple’ picture so I don’t need to upload it again.

joomla 3 0 tutorial how to add image to parent child menu items 3 Joomla 3.0 Tutorial   How to Add Images to Menus Joomla 3.0 Add Image to Menu Item
  • Click on the image you want as your Menu Image
  • Click on ‘Insert

3.  Insert Image with Title – See Example – Apples

From the example you will see the word ‘Apples’ beside the image.  If this is what you want then set

  • Add Menu Title = Yes
  • Click on ‘Save & Close’

4.  Insert Image without Title – See Example – Pears

If you want to show the menu item without the menu title like the Pear Menu item.  See the example at the very top, where you just see the image of the Pear and not the Menu title:

joomla 3 0 tutorial how to add image to parent child menu items 4 Joomla 3.0 Tutorial   How to Add Images to Menus Joomla 3.0 Show Image for menu Item without TItle
  • In the ‘Advanced Options’ in the Menu Manager : Edit Menu Item
  • Set the following value:
    • Add Menu Title = No
  • Click on ‘Save & Close’

Now you can refresh your Joomla 3.0 frontend and see our menus with images.  You can even try to set the parent menu item with an image as well.

Hope that helps you,

Elaine

 Joomla 3.0 Tutorial   How to Add Images to Menus

Elaine

Elaine is the founder of CmsMind, an online blog providing Joomla and Wordpress tutorials. Elaine lives in Toronto and when she is not online, she is either Marathon and Triathlon training or travelling and racing somewhere in the world. Find her also at: Save Money, Premium Themes and Templates, and at Webhosting Tips.

More Posts - Website

{ 1 comment… read it below or add one }

shiva aher February 14, 2014 at 11:06 am

Actually i am confused about category, menu and article?
Some time category follow menu and some time different plz help me?

Reply

Leave a Comment

Captcha Captcha Reload

Older Post:

Newer Post: